日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

通過前面的學(xué)習(xí)，對(duì)自定義組件的相關(guān)概念和知識(shí)點(diǎn)也有了一定了解，今天我們就來學(xué)習(xí)一下給自定義元素及其子元素設(shè)置樣式的幾種方法。

湘陰ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

直接給自定義標(biāo)簽添加樣式

index.html：

index.js：

class MyCard extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
    }
}

window.customElements.define("my-card", MyCard);

結(jié)果樣式生效：

需要注意的是：繼承自 HTMLElement 的自定義元素，其 style.display 默認(rèn)為 inline。

由以上結(jié)果可以推論出：

1. 給自定義元素添加 class，然后通過 class 名稱設(shè)置樣式可以生效;
2. 給自定義元素添加行內(nèi)樣式，可以生效;
3. 在自定義元素構(gòu)造函數(shù)中給 this 添加樣式，可以生效。

給自定義元素內(nèi)部子元素設(shè)置樣式

在主 DOM 通過類名設(shè)置

在 style 標(biāo)簽中增加如下樣式：

結(jié)果：不生效。

通過前面的學(xué)習(xí)，我們知道：自定義元素內(nèi)部實(shí)際上是一個(gè) Shadow DOM，它和主 DOM 是相互隔離的，所以，主 DOM 中的樣式是影響不到 Shadow DOM 的。

使用 JS 給 Shadow DOM 增加 style 標(biāo)簽

這里分為兩種場(chǎng)景：在主 DOM 使用 JS 、在 Custom Elements 構(gòu)造函數(shù)中使用 JS。

第一種：在主 DOM 使用 JS 給 Shadow DOM 增加 style 標(biāo)簽：

效果如下：

第二種：在 Custom Elements 構(gòu)造函數(shù)中使用 JS 增加 style 標(biāo)簽：

效果如下：

就以上兩種方式來說，第二種更符合組件化的特征，并且使用第一種方式時(shí)要注意，如果將添加 style 標(biāo)簽的代碼放在定義 Custom Elements 之前會(huì)報(bào)錯(cuò)(找不到自定義元素)。

引入 CSS 文件

這里使用 JS 創(chuàng)建 link 標(biāo)簽，然后引入 CSS 文件給自定義元素內(nèi)部的子元素設(shè)置樣式，代碼如下：

my_card.css 代碼如下：

.card-header{
    padding:10px;
    background-color: yellow;
    font-size: 16px;
    font-weight: bold;
}

效果如下：

當(dāng)然，這里也可以在主 DOM 中使用 JS 給 Shadow DOM 引入 CSS 文件，但是，這樣做不符合組件化的特征，所以略過。

結(jié)束語

以上就是給自定義元素及其子元素進(jìn)行樣式設(shè)置的基本方法總結(jié)。

~

當(dāng)前文章：Web Components 系列之 自定義組件的樣式設(shè)置
文章路徑：http://www.dlmjj.cn/article/dpshgpe.html