前言

• Custom Elements
• Shadow DOM
• Templates
• Slots

以及和這些概念相關(guān)的子知識(shí)點(diǎn)。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供成縣網(wǎng)站建設(shè)、成縣做網(wǎng)站、成縣網(wǎng)站設(shè)計(jì)、成縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、成縣企業(yè)網(wǎng)站模板建站服務(wù)，十載成縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

理論知識(shí)基本上夠用了，從現(xiàn)在開始我們需要將理論運(yùn)用到實(shí)踐中，讓理論為實(shí)踐服務(wù)。今天，我們就使用 Web Components 的相關(guān)知識(shí)來(lái)實(shí)現(xiàn) MyCard 的制作，原型呢就以我們?nèi)巳硕加械纳矸葑C做參照吧。

最終實(shí)現(xiàn)的基本布局效果如下：

使用 Templates 布局

這里我們使用 HTML 模板將布局先構(gòu)建出來(lái)，代碼如下：

創(chuàng)建自定義元素

使用我們前面學(xué)習(xí)過的方法，創(chuàng)建一個(gè)基本的自定義元素 my-card，在自定義組件中引入 Templates 布局，代碼如下：

class MyCard extends HTMLElement {
    constructor () {
        super();
        this.shadow = this.attachShadow({mode: "open"});
        let tempEle = document.getElementById("card_layout");
        this.shadow.appendChild(tempEle.content);
    }
}
customElements.define("my-card", MyCard);

使用自定義元素

在 HTML 的 body 中引入 my-card 標(biāo)簽：

總結(jié)

最終實(shí)現(xiàn)的效果如文章開頭所示。

在這篇文章中，我們只使用 Custom Elements 和 Templates 實(shí)現(xiàn)了基本布局和樣式，實(shí)用價(jià)值基本為零。

在后續(xù)中，會(huì)加入 Slots 讓自定義元素實(shí)現(xiàn)可復(fù)用的效果。

~

文章題目：WebComponents系列之實(shí)現(xiàn)MyCard的基本布局
網(wǎng)站地址：http://uogjgqi.cn/article/dhgipph.html