我有这个例子:
http://codepen.io/dbugger/pen/IuDxw
我在 Shadow DOM 中有一个插入点,我尝试对其应用样式,使其消失。但图像仍然可见。我怀疑有些原则我还没有完全理解 Web 组件。
谁能解释一下我做错了什么?
最佳答案
诀窍在于,如 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 ,但请注意,在许多情况下,这被认为是向外界泄露了实现细节。如果第一个解决方案有效,请改用它。
关于javascript - 样式化插入到 Shadow DOM 中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20166016/