关于css样式隔离

一.为什么需要样式隔离？

css一旦生效，就会应用于全局，所以很容易出现冲突。所以需要进行样式隔离。

二.如何进行样式隔离？

1. 命名空间： 给每个不同模块使用的css规划好命名，这样所有的css就都不会出现冲突，这种方法虽然很好理解和简单，但是编写起来很繁琐，维护成本会很高。

2. css Modules： 这其实跟命名空间有点类似，vue应该就是使用类似的方法，给选择器加上特殊的字符串，达到css隔离的效果。

3. css-in-js

4. Shadow DOM

Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。

有了 Shadow DOM，元素就可以和一个新类型的节点关联。这个新类型的节点称为 shadow root。与一个 shadow root 关联的元素称作一个 shadow host。shadow host 的内容不会渲染；shadow root 的内容会渲染。

比如，你拥有如下的标记：

<button>aaa</button>
<script>
    var host = document.querySelector('button');
    var root = host.createShadowRoot();
    root.textContent = 'bbb';
</script>

因此，相比显示以下内容aaa

页面将会呈现如下内容bbb

不仅如此，若页面中的 JavaScript 想获得按钮的 textContent 是什么，它不会得到 “bbb”，而是 “aaa”，因为 shadow root 下的 DOM 子树被封装了起来。

MDN上面解释是：Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。

你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style 属性），或者为整个 Shadow DOM 添加样式（例如在style元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 :focus-within），这为封装提供了便利。

注意，不管从哪个方面来看，Shadow DOM 都不是一个新事物——在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的video元素为例。你所能看到的只是一个video标签，实际上，在它的 Shadow DOM 中，包含来一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素（custom element）维护一组 Shadow DOM。

Shadow DOM真正意义上的实现了dom和css的隔离。