css 隔离

css一旦生效，就会应用于全局，所以很容易出现冲突。css隔离就是为了解决这个问题。可以使用的方法大概就几个：

命名空间：

这很好理解，其实就是给每个不同模块使用的css规划好命名，这样所有的css就都不会出现冲突，这种方法虽然很好理解和简单，但是编写起来很繁琐，维护成本会很高，当然，现在也有打包工具很容易就可以实现就是了。

css Modules：

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

css-in-js：

这个概念已经诞生很多年了，作为开发了快四年的前端，还是因为了解一下css隔离才知道有这个东西。有查到好像是Facebook员工提出的，刚提出这个概念的时候还火了一段时间，后来那些开源的库几乎被废弃或者不再维护。本着不求甚解的心理，于是不去学习，感兴趣的可以自行去查找资料。

Shadow 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。

我们可以设置一下看一下video的Shadow DOM：

然后自己实现一个：

let shadow = document.getElementById('app').attachShadow({mode: 'closed'});

var p = document.createElement('p');

p.innerText = '这是shdow dom';shadow.appendChild(p);

不过奇怪的是自己实现的能在标签那边看见，Shadow DOM真正意义上的实现了dom和css的隔离。今天只是分享概念，感兴趣可以自己去MDN看看那个例子。至于是否在项目中使用，自己也不知道。

（完）

Coding 个人笔记