shadow DOMのSVGパスをvisibleに設定する：hidden

Question

shadow DOMのSVGパスをvisible：hiddenまたはdisplay：noneに設定することはできますか？

ここDEFSファイル内のSVGです：

<symbol id="plus-minus" viewBox="0 0 16 16"> 
    <rect y="7" width="16" height="2" class="bar-horizontal"/> 
    <rect x="7" width="2" height="16" class="bar-vertical"/> 
</symbol> 

は、ここで使用タグ付きSVGです：

<svg class="icon-plus-minus" aria-hidden="true"> 
    <use xlink:href="#plus-minus"></use> 
</svg> 

私はクラス「バー・横」をターゲットとし、それを隠すためにしようとしていますアクションがトリガーされたとき。

ありがとうございます！

Answer 1

user-agentシャドウDOMのコンテンツにはアクセスできませんが、ユーザ作成のものだけです。

したがって、2つのシンボルを定義し、代わりに<use>要素にスタイルvisibility:hiddenを適用する必要があります。

<svg> 
    <symbol id="plus-minus-h" viewBox="0 0 16 16"> 
     <rect y="7" width="16" height="2"/> 
    </symbol> 
    <symbol id="plus-minus-v" viewBox="0 0 16 16"> 
     <rect x="7" width="2" height="16" /> 
    </symbol> 
</svg> 
<svg class="icon-plus-minus" aria-hidden="true"> 
    <use xlink:href="#plus-minus-h" class="bar-horizontal"></use> 
    <use xlink:href="#plus-minus-v" class="bar-vertical"></use> 
</svg>