Shadow DOM里的样式.

• 他们有作用域限制
• 他们不会溢出
• 他们有简单的名字
• 他们很酷 ?

<custom-picture>
    #shadow-root
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        <style>
            /*Applies only to spans inside shadow DOM. Doesn't leak out.*/
            span {
                color: red;
            }
        </style>
        <span>Hello!</span>
        __________________________________________________________________
</custom-picture>

哇哦，我们可以使用样式表吗？

可以… 但并不是在所有浏览器都行得通。?

<custom-picture>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    #shadow-root
        <!--All styles coming from custom-picture.css will be scoped inside this shadow root-->
        <link rel="stylesheet" href="custom-picture.css">
        <span>Hello!</span>
    _____________________________________________________

会受到全局样式的影响吗？

当然，在某些方面，只有某些继承的特性才会穿过shadow DOM 边界，比如：

• color
• background
• font-family etc.

* 选择器会耽误事儿。因为使用 * 代表着所有的元素，包含着你想要关联的shadow root元素、宿主元素。应用的宿主元素和继承的属性，会渗透shadow DOM的边界应用到内层元素上。