Question

假设我创建并插入了一个像这样的元素

<template id="react-web-component">
  <span>template stuff</span
  <script src="/static/js/bundle.js" type="text/javascript"></script>
</template>
<script>
  (function (window, document) {
    const doc = (document._currentScript || document.currentScript).ownerDocument;
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function () {
          const template = doc.querySelector('template#react-web-component').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
        },
      },
    });
    document.registerElement('react-web-component', { prototype: proto });
  })(window, document);
</script>
<react-web-component></react-web-component>

现在我想用querySelector来访问我元素的 open 影子dom。像这样：

document.querySelector('react-web-component::shadow')

但这不起作用。还有其他办法吗？

编辑以回应@Supersharp的回答

对不起，我没说清楚。我正在使用webpack的style-loader，它只接受与document.querySelector一起使用的CSS选择器，所以我要问的是CSS选择器我可以用这种方式。

Answer 1

通过Shadow主机的shadowRoot属性获取它：

document.querySelector('react-web-component').shadowRoot

<强>更新

曾经有过这种CSS选择器，但现在它已被弃用。

也许您可以尝试使用普通DOM而不是Shadow DOM。

Answer 2

如果我理解你的话，它有一个编辑草案（因此它还不存在）。

https://drafts.csswg.org/css-scoping/#selectors

所以答案是“不”，你不能这样做。

有没有办法使用querySelector来获得一个开放的阴影dom

2 个答案: