样式化插入Shadow DOM中的内容

Question

我有这个例子：

http://codepen.io/dbugger/pen/IuDxw

我在Shadow DOM内有插入点的位置，然后尝试对其应用样式，使其消失。 但是图像仍然可见。 我怀疑有一些我没有适当地理解Web组件的原则。

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

Answer 1

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

由于您的JS对我来说正确，因此我没有介绍为什么它没有创建阴影DOM元素，但是关于阴影DOM Web组件的文章很棒：

Answer 2

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

话虽这么说 ，在组件创建者想要对用户提供的内容进行样式设置的过程中，肯定存在有效的用例。 基于主机上的属性，事件（点击）等隐藏用户提供的标记的某些部分绝对是其中之一。 在这种情况下，将<content>元素包装在Shadow DOM元素中并隐藏它：

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

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