javascript - 插入到 Shadow DOM 中的样式内容

Question

我有这个例子：

我在 Shadow DOM 中有一个插入点，我尝试对其应用样式，使其消失。但图像仍然可见。我怀疑有一些原则我没有从 Web 组件中正确理解。

有人可以解释一下我做错了什么吗？

score 0 · Accepted Answer

诀窍在于，正如 kkemple 所提到的，图像不是 Shadow DOM 的一部分，而是 Light DOM 的一部分，这意味着它不能从组件内部直接访问。它是用户提供的内容，例如以 OOP 语言传递给类构造函数的参数。如果可能的话，用户应该提供自己的样式来配合它。

话虽如此，组件作者想要为用户提供的内容设置样式肯定存在有效的用例。根据主机属性、事件（点击）等隐藏用户提供的标记的某些部分绝对是其中之一。在这种情况下，将元素包装<content>在 Shadow DOM 元素中并隐藏它：

<template>
  <style>
    .image {
      display: none;
    }
  </style>
  <div class="image">
    <content></content>
  </div>
</template>

附带说明：技术上可以将样式直接应用于 Light DOM 元素，但请注意，在许多情况下，这会被视为向外界泄露实现细节。如果第一个解决方案有效，请改用它。

score 0 · Accepted Answer

不知道为什么你对此投了反对票，但它不起作用的原因是因为你的代码不在影子 DOM 中，div 和图像仍然可以通过默认样式访问。我分叉了你的 codepen 并添加了样式，这样你就可以看到了。

我没有说明为什么它没有创建影子 DOM 元素，因为您的 JS 对我来说看起来是正确的，但这里有一篇关于影子 DOM 网络组件的精彩文章：

2 回答 2