javascript七基础学习系列二千二百八十五：使用影子DOM

把影子DOM添加到元素之后，可以像使用常规DOM一样使用影子DOM。来看下面的例子，这里
重新创建了前面红/绿/蓝子树的示例：
for (let color of [‘red’, ‘green’, ‘blue’]) {
const div = document.createElement(‘div’);
const shadowDOM = div.attachShadow({ mode: ‘open’ });
document.body.appendChild(div);
shadowDOM.innerHTML = `

Make me ${color}

影子DOM 并非铁板一块。HTML 元素可以在DOM 树间无限制移动： document.body.innerHTML = `

Move me

`; const divElement = document.querySelector('div'); const pElement = document.querySelector('p'); const shadowDOM = divElement.attachShadow({ mode: 'open' }); // 从父DOM 中移除元素 divElement.parentElement.removeChild(pElement); // 把元素添加到影子DOM shadowDOM.appendChild(pElement); // 检查元素是否移动到了影子DOM 中 console.log(shadowDOM.innerHTML); //

Move me