<html>
<meta charset="utf-8">
<title>shadow DOM</title>
<body>
<p class="text">这是外面页面的text类文字</p>
<div id="shadow-host">
<span id="shadow-host2" slot="slot1"></span>
</div>
<div id="p1">
<p class="text">这是原本就在html上的dom元素，也可以再添加到shadow DOM中</p>
</div>
<script>
const shadowHost = document.querySelector('#shadow-host')
// 通过attachShadow创建一个shadow Root
const shadow = shadowHost.attachShadow({ mode: 'closed' });
const shadowText = document.createElement('p');
shadowText.setAttribute('class', 'text');
shadowText.innerText = 'shadow DOM内部的text类文字'
// 为shadow dom创建一个style标签，一开始这个style.isConnected为false，把他添加给shadow Root后 isConnected就为true了
// 创建一个slot
const slot = document.createElement('slot')
slot.setAttribute('name', 'slot1')
// 为shadow dom添加元素
shadow.appendChild(shadowText);
shadow.appendChild(document.querySelector('#p1'));
shadow.appendChild(slot)
const shadowHost2 = document.querySelector('#shadow-host2')
const p = document.createElement('p')
p.innerText = "s2content"
const shadow2 = shadowHost2.attachShadow({ mode: 'closed' })
shadow2.appendChild(p)
</script>
</body>
</html>
网友评论