Question

我有这个例子：

我在Shadow DOM中有一个插入点，我尝试对其应用一种样式，使其消失。但图像仍然可见。我怀疑有一些原则，我没有从网络组件中得到任何好处。

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

Answer 1

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

我没有介绍为什么它没有创建一个shadow DOM元素，因为你的JS看起来对我来说是正确的，但这里有一篇关于shadow DOM web-ponents的精彩文章：

Answer 2

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

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

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

旁注：apply styles directly to Light DOM elements在技术上是可行的，但请注意，在许多情况下，这被认为是泄露给外界的实施细节。如果第一个解决方案有效，请改用它。