Question

我需要从Shadow DOM获取元素并进行更改。我怎么能这样做？

<div>
     <input type="range" min="100 $" max="3000 $">
</div>

Answer 1

您无法访问浏览器创建的Shadow DOM来显示控件，在Dev Tools中称为#shadow-root (user-agent)。 <input>就是一个例子。

您只能使用{ mode: 'open' }选项访问打开自定义Shadow DOM（您自己创建的那些）。

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

<强>更新

对于大多数UX标准HTML元素都是如此：<input>，<video>，<textarea>，<select>，<audio>等。

Answer 2

以下是一个例子：

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);

演示：

＆＃13;

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);

＆＃13;

<div id="example">Element</div>

＆＃13;

我希望这会对你有所帮助。

如何使用JavaScript获取用户代理阴影根中的元素？

2 个答案: