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

Question

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

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

Answer 1

要回答OP问题的一般版本：

从页面上的任何位置查询影子元素？

感觉还是缺少shadow root API。它似乎毫无用处querySelectorAll，因为它querySelectorAll实际上不会再获得所有匹配元素，因为它忽略了shadowRoots. 也许有一个 API 可以解决这个问题，但由于我没有找到任何 API，所以我编写了自己的 API：

该函数递归地迭代所有元素shadowRoots并获取页面上所有匹配的元素，而不仅仅是单个shadowRoot.

/**
 * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots.
 * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements.
 * @see https://stackoverflow.com/a/71692555/2228771
 */
function querySelectorAllShadows(selector, el = document.body) {
  // recurse on childShadows
  const childShadows = Array.from(el.querySelectorAll('*')).
    map(el => el.shadowRoot).filter(Boolean);

  // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);

  const childResults = childShadows.map(child => querySelectorAllShadows(selector, child));
  
  // fuse all results into singular, flat array
  const result = Array.from(el.querySelectorAll(selector));
  return result.concat(childResults).flat();
}

// examples:
querySelectorAllShadows('td'); // all `td`s in body
querySelectorAllShadows('.btn') // all `.btn`s in body
querySelectorAllShadows('a', document.querySelector('#right-nav')); // all `a`s in right menu

Answer 2

您无法访问由浏览器创建的Shadow DOM来显示控件,该控件#shadow-root (user-agent)在开发工具中称为a .<input>就是一个例子.

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

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

更新

它是最UX标准的HTML元素真:<input>,<video>,<textarea>,<select>,<audio>,等.

Answer 3

这是一个例子:

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>

我希望这能帮到您.