插入到 Shadow DOM 中的样式内容答案

【问题标题】：Styling content inserted in the Shadow DOM插入到 Shadow DOM 中的样式内容
【发布时间】：2013-11-23 18:13:20
【问题描述】：

我有这个例子：

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

谁能解释一下我做错了什么？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：