国內一级黄色视频|少妇91导航日韩第一页久久|黄色三A视频色爽网站|亚洲精品 无码一区二区在直播间|成人高清国产无码|aaa成人免费视频|国产一级一片免费播放放a|我要看免费的毛片|动漫a片免费观看|日韩欧美国产视频

概述

很類似 Vue 中的模板和插槽的使用，但語法有所不同。

定義

• 使用 <template> 定義模板內(nèi)容

  • 此標(biāo)簽包裹的內(nèi)容不會(huì)出現(xiàn)在 DOM 中。
  • 內(nèi)部可使用 <style> 設(shè)置樣式，只會(huì)在模板內(nèi)生效。

• 使用 <slot> 來設(shè)置默認(rèn)插槽

  • 可在其中添加內(nèi)容，作為未使用插槽時(shí)的默認(rèn)顯示。
  • 添加屬性 name 可設(shè)置具名插槽。

simple example：

使用

盡管沒有強(qiáng)綁定，但是模板和插槽通常與自定義元素一起使用。

這里要注意的關(guān)鍵點(diǎn)是，我們將模版內(nèi)容的克隆添加到通過 Node.cloneNode() 方法創(chuàng)建的影子根上，true 的意思是深度克隆。

然后在 html 中使用即可：

注意，插槽不能以類似 Vue 中的 <template slot="description"></template> 方式使用。

在影子 DOM 中，定義插槽樣式

需要使用 ::slotted 偽元素。

refer

MDN - ::slotted()