Question

我阅读了许多关于影子DOM的文章，但不清楚这一点。能够谁知道什么是影子DOM以及如何为代码添加一个？

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

Answer 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>';

Answer 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>元素在Shadow DOM中插入Light 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>

Shadow DOM：什么是影子Dom以及如何在其中编辑内容

2 个答案: