WEB 编程：富文本编辑器 Quill 配合 Pico.css 样式被影响的问题之Shadow DOM

前情提要

前面我写过一篇文章讲这个事情。用的是 iframe 的方法。文章链接：

WEB 编程：富文本编辑器 Quill 配合 Pico.css 样式被影响的问题-优快云博客

问题来了

使用 iframe 确实可以在框架页面有 Pico.css 的情况下，在 iframe 里面的 Quill Editor 不受影响。但是，编辑器里面用户输入的内容，是需要提交到服务器端的。因此，编辑器是嵌套在一个 <form> <div id="MyEditor"></form> 里面的。同时这个 Form 里面还要有一个提交按钮。

如果仅仅是提交编辑器里面的内容，那这样做就没有问题。但是，可能还有单独的文章表，等等其它需要用户输入的东西，要一起提交。比如文章标题：<input type="text" id="MySubject">， 而这个输入框是需要被 Pico.css 给予样式的。如果把这些输入框和 Editor 一起放进 iframe 里面，则无法接受 Pico.css 的样式！

采用 Shadow DOM 来解决这个问题

Shoadow DOM 的基本概念

页面上很多元素，输入框，按钮，等等，构成页面的 DOM。

页面上还可以有 Shadow DOM，挂载在 DOM 的某个节点底下。在 Shadow DOM 里面的页面元素比如一个<input type="text"> 或者一个按钮比如 <button> 也是正常显示在页面上的，但是，这些元素不受页面上的 CSS 的影响。相当于屏蔽掉了页面上的 CSS；

具体操作

思路

我们是把 Editor 放到 <div id="MyEditor"></div&