<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>
shadowDom&slot
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 官方文档 即插槽，插槽定义在子组件内，是组件的一块HTML模板，可以在子组件内设置默认值，也可以在父组件内定义插槽...
- 单个插槽 | 默认插槽 | 匿名插槽首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与...
- slot 与slot-scope是 vue2.6 之前的语法，vue2.6 推出了新的语法v-slot 几种用法对...
- Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...
- 1.简称 论文《Slot-Gated Modeling for Joint Slot Filling and In...
