英文链接:, 29 AUGUST 2013 on Web Components, Shadow DOM
在里我们整体讨论了设置 Shadow DOM 样式的一些基本事项,但我们仅仅触及了一些皮毛。今天我们紧接着上文继续讨论怎样使用分布节点(distributed nodes)以及怎样将我们的组件打通使外部可以使用并自定义。
在今天开始之前,我想要感谢 Eric Bidelman 的这篇介绍 Shadow DOM 样式添加的(可以戳)。本文的大部分都是我对他这篇博文内容的实践。如果有机会的话你一定要去读一下。
技术支持
我建议你使用 Chrome v33+ 来实验本文的例子,因为 33+ 的 Chrome 对我所描述的这些新特性都有浏览器的原生支持。
分布节点
通过阅读各种博客,我认识到了一点:在使用 shadow DOM 的时候应该确保内容和表现的分离。换句话说,如果你的一个按钮上想展示一些文本,那么这些文本应该来自页面而不是埋在 shadow DOM 的模板里。来自页面并通过 <content>
标签添加到 shadow DOM 的内容被称为分布节点。
在最开始我困惑于如何给分布节点添加样式的时候,我这样写 CSS 的:
试想如果 button
是来自影子宿主的话,一旦它被 <content>
标签选中,就应该能被我的样式渲染。然而事实却并非如此,实际上,分布节点的样式渲染需要用到 :content
伪类选择器。这样做是十分有意义的,因为我们可能会想让影子模板中的按钮与出现在 <content>
标签中的按钮拥有不同的样式。
让我们看一个实例:
在这里我们将按钮从 .widget
影子宿主中取出并放置到 <content>
标签中。使用 ::content
伪类选择器,我们使用 >
将 button
定位到子元素并设置了华丽丽的样式。
::shadow
迄今为止我们已经列举了各种基于 shadow DOM 封装的优点,但有时你可能会想让使用者打破影子边界的壁垒,让他们能够给你的组件添加一些样式。
我们假设你在表单里创建了一个标志。在你的模板里你给输入框定义了文字的大小,但是你希望用户可以改变文字大小以更好的适应自己的网站。使用 ::shadow
伪类选择器我们可以赋予用户重写我们默认定义的自由,如果用户这样做的话,他就可以打破影子边界的壁垒。
/deep/
使用 ::shadow
选择器的一个缺陷是他只能穿透一层影子边界。如果你在一个影子树中嵌套了多个影子树,那么使用 /deep/
组合符更为简便。
总结
如果你已经读了本文和最近的一篇博文那么在给 shadow DOM 添加样式方面你已经懂得和我一样多啦。但是我们还没有说 JavaScript 呢!我们把 JavaScript 的部分留到明天再说:)
和以往一样有问题的话去我的 twitter 或者给我留言,感谢阅读~
:组合符(Combinator)是 CSS 里的一个概念,用于表示两个选择器之间的关系。现有的组合符号有后代选择器(space)、子选择器(
>
)、相邻兄弟选择器(+
)和兄弟选择器(~
)。