web-dev-qa-db-ja.com

JavaScriptでユーザーエージェントシャドウルートの要素を取得する方法

Shadow DOMから要素を取得して変更する必要があります。どうすればできますか？

<div>
     <input type="range" min="100 $" max="3000 $">
</div>
javascripthtmlweb-componentshadow-dom
11
Yaroslav Polubedov

次に例を示します。

var container = document.querySelector('#example');
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = '<div>Root<div class="test">Element in shadow</div></div>';

//Access the element inside the shadow !
//"container.shadowRoot" represents the youngest shadow root that is hosted on the element !
console.log(container.shadowRoot.querySelector(".test").innerHTML);

デモ：

var container = document.querySelector('#example');
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = '<div>Root<div class="test">Element in shadow</div></div>';

//Access the element inside the shadow !
console.log(container.shadowRoot.querySelector(".test").innerHTML);
<div id="example">Element</div>

これがお役に立てば幸いです。

10
Ismail RBOUH

ブラウザで作成されたShadow DOMにアクセスしてコントロールを表示することはできません。これは、Dev Toolsでは#shadow-root (user-agent)と呼ばれます。 <input>はその一例です。

openカスタムShadow DOM（自分で作成したもの）にアクセスするには、{ mode: 'open' }オプションを使用する必要があります。

element.attachShadow( { mode: 'open' } )

更新

これは、ほとんどのUX標準HTML要素に当てはまります：<input>、<video>、<textarea>、<select>、<audio>など。

18
Supersharp