Question

假设您创建了两个自定义元素。每个创建一个影子dom。现在，您要从外面在这些自定义元素之一中选择一个dom元素（我知道我可以将CSS放入自定义元素中，但在这种特定情况下我不想这样做）。

理论上，这应该没有问题，并且可以在Firefox和Edge中使用，但不能在Chrome中使用（通常是相反的方式）。请参见以下示例：

inner-element {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
<script>
  class InnerElement extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({
        mode: 'open'
      });

      shadow.innerHTML = "<h1>Inner</h1>";
    }
  }
  window.customElements.define('inner-element', InnerElement);

  class OuterElement extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({
        mode: 'open'
      });

      shadow.innerHTML = "<h1>Outer</h1><inner-element></inner-element>";
    }
  }

  window.customElements.define('outer-element', OuterElement);
</script>
<outer-element></outer-element>

有人知道我的CSS如何使其在当前所有主流浏览器中都能正常工作吗？

Shadow DOM使用什么CSS选择器？

0 个答案: