Shadow DOM：什么是 shadow Dom 以及如何编辑其中的内容答案

【问题标题】：Shadow DOM : what is shadow Dom and How to edit something inside itShadow DOM：什么是 shadow Dom 以及如何编辑其中的内容
【发布时间】：2017-07-02 10:49:03
【问题描述】：

我阅读了很多关于 shadow DOM 的文章，但并不清楚这一点。能有人告诉什么是 shadow DOM 以及如何为下面的代码添加一个？

<html>
  <head></head>
  <body>
    <div id="box"></div>
  </body>
</html>

【问题讨论】：

标签： javascript jquery dom browser shadow-dom

【解决方案1】：

Shadow DOM 只是 DOM 和 CSS 的抽象，不包含在主文档的 DOM 中。

使用 Shadow DOM 的一个例子是在浏览器中。当您创建 <input type="range" /> Chrome（或其他基于 Webkit 的浏览器）可能会呈现一个滑块 Web 组件。虽然此滑块不是主文档的 DOM 的一部分，但浏览器会利用 Shadow DOM 来显示它。

Shadow DOM 在显示可能与代码不同的情况下被大量使用，主要是为了防止 CSS 泄漏到主要组件中。您可以在许多流行的 CSS 框架中找到这种模式。

为了附加一个“影子”元素，您可以使用Shadow DOM API，如下所示：

var shadow = document.querySelector('#box').attachShadow({ 
  mode: 'open' 
});
shadow.innerHTML = '<p>A box in the shadows</p>';

【讨论】：

【解决方案2】：

要将 Shadow DOM 添加到您的代码中，请将此脚本添加到 HTML 文件的末尾：

<script>
    //create a Shadow DOM
    var shadowRoot = box.attachShadow( { mode: 'open' } )

    //add some content
    shadowRoot.innerHTML = 'RTFM!'
</script>

Shadow DOM 被渲染而不是初始 DOM 树（称为 Light DOM）。

您还可以借助<slot> 元素将 Light DOM 的内容插入到 Shadow DOM 中：

function add() {
  box.attachShadow( { mode: 'open' } )
     .innerHTML = `
      <style>
        ::slotted( span ) { 
          color: blue ; 
          font-style: italic ; 
          outline: none !important ; 
          min-width: 0 !important; 
        }
      </style>
      Hello <slot name="Name"></slot>!`
}

#box [contenteditable] {
  outline: 1px solid lightgray ;
  display: inline-block ;
  min-width: 50px ;
}

<div id=box>
  Type your name:
  <span slot="Name" contenteditable>Mickey</span>
  <br><button onclick="add()">Add Shadow</button>
</div>

【讨论】：