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

Question

我有这个例子:

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

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

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

Answer 1

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

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

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

http://codepen.io/anon/pen/rCGqD

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