這篇文章主要介紹Web Components中Slots有什么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

十載的府谷網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整府谷建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“府谷網(wǎng)站設(shè)計”,“府谷網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

Slots 的作用

我們首先來看一個模板元素：

既然是模板，那就意味著在很多地方都會使用到它，但是，這里會存在一個問題：所有使用這個模板的地方都將顯示模板中的內(nèi)容，即并不是所有人的名字都叫 ”編程三昧“。

在這種情況下，叫其他名字的人是沒法使用這個模板的，顯然，這就和使用模板的初衷相違背了，這個模板的使用范圍太過狹小，不存在通用性。

想要使得這個模板具有通用性，其關(guān)鍵點在于 .details 中顯示的內(nèi)容是否具有通用性。

開動腦筋想一想，我們是不是可以將其中的”編程三昧“設(shè)為動態(tài)內(nèi)容，誰使用這個模板，誰就傳入自己的名字。恰好， Slots（插槽）就可以實現(xiàn)這種效果，具體如下：

    MY CARD

    
        My name is 編程三昧。    

    插槽傳值
    web Components

其對應(yīng)的 JS 代碼如下：

class MyCard extends HTMLElement {
    constructor () {
        super();
        const template = document.getElementById('cardTmp');
        const templateContent = template.content;

        this.attachShadow({mode: 'open'}).appendChild(
            templateContent.cloneNode(true)
        );
    }}customElements.define('my-card', MyCard);

實現(xiàn)效果：

通過上面的例子，我們可以用一句話總結(jié) Slots 的作用：Slots 的作用就是給模板元素傳值，增強(qiáng)模板元素的靈活性和通用性。

Slots 的相關(guān)特性

對于 Slots 的相關(guān)特性，我通過問答的形式逐一解釋。

Slots 的 name 屬性有什么作用？

帶有指定 name 的 Slots 被稱為 ”具名插槽“，name 是 slot 的唯一標(biāo)識。

在引入插槽內(nèi)容的元素上需要使用與 Slots.name 值相同的 slot 屬性。看下面的代碼：

    MY CARD

    
        My name is 19。    

    編程三昧
    web Components

運(yùn)行效果：

因為傳入的 slot 屬性值和 Slots 的 name 屬性值對不上，所以 Slots 未被插入。

傳值時的 slot 屬性值必須和 Slots 的 name 屬性值保持一致。

不給 Slots 傳值會怎樣？

將上面兩個自定義元素 my-card 中的 span 元素去掉，不傳任何值，即改成這樣：

運(yùn)行后的效果：

可以看到，如果不給 Slots 傳值，那么 Slots 會顯示它自己預(yù)設(shè)的內(nèi)容。

其實結(jié)合以上兩點，還可以得出一個結(jié)論：如果有引用 Slots ，那只有對應(yīng) name 的 Slots 內(nèi)容會被顯示，其余的 Slots 皆不顯示。

正常 DOM 中可以使用 Slots 嗎？

這里的”正常 DOM“ 是相對于 Shadow DOM 來說的，指的是頁面所在的文檔對象。

代碼如下：

Slots 預(yù)設(shè)值bcsm

顯示如下：

總結(jié)：正常 DOM 中使用 Slots，它會直接渲染在頁面上，切不具備插槽效果。

Slots 是不是必須用在 Templates 中？

我們前面看到的例子中，Slots 是在 Templates 中，那是不是意味著 Slots 必須要用在 Templates 中才能生效呢？

因為已經(jīng)驗證過在正常 DOM 中的 Slots 是無效的，所以我們在 Shadow DOM 中做個測試，代碼如下：

    
不在 Templates 中使用 Slots
    
        這是 Slots 預(yù)設(shè)值
    

    
        編程三昧
    
    

顯示效果如下：

從顯示效果上可以看到，將包含 Slots 的正常 DOM 節(jié)點在追加到 Shadow DOM 后，Slots 顯示傳入的值，也就是說 Slots 是生效了的。

總結(jié)：Slots 在 Shadow DOM 中就可生效，并非一定要用在 Templates 中。

一個自定義元素中可以使用多個同名 Slots 嗎？

看代碼：

    MY CARD

    
        My name is 編程三昧。    

    插槽傳值1
    插槽傳值2

顯示效果：

結(jié)論：一個 Slots 可以接收多個傳入值，且都會解析顯示出來。

Slots 的傳值元素必須是自定義元素的直接子元素嗎？

上面的例子中，所有給 Slots 傳值的元素都是自定義元素的子元素，那是不是非直接子元素不行呢？

代碼如下：

    MY CARD

    
        My name is 編程三昧。    

    

        插槽傳值1
    

運(yùn)行效果（傳值失效）：

結(jié)論：給 Slots 傳值的元素必須是自定義元素的直接子元素，否則傳值失效。

以上是“Web Components中Slots有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！