建站
咨詢
售后
建站咨詢
新聞中心
前言
通過前面的學習，對自定義組件的相關概念和知識點也有了一定了解，今天我們就來學習一下給自定義元素及其子元素設置樣式的幾種方法。
湘陰ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
直接給自定義標簽添加樣式
index.html：
index.js：
class MyCard extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: "open" });
}
}
window.customElements.define("my-card", MyCard);
結果樣式生效：
需要注意的是：繼承自 HTMLElement 的自定義元素，其 style.display 默認為 inline。
由以上結果可以推論出：
- 給自定義元素添加 class，然后通過 class 名稱設置樣式可以生效;
- 給自定義元素添加行內(nèi)樣式，可以生效;
- 在自定義元素構造函數(shù)中給 this 添加樣式，可以生效。
給自定義元素內(nèi)部子元素設置樣式
在主 DOM 通過類名設置
在 style 標簽中增加如下樣式：
結果：不生效。
通過前面的學習，我們知道：自定義元素內(nèi)部實際上是一個 Shadow DOM，它和主 DOM 是相互隔離的，所以，主 DOM 中的樣式是影響不到 Shadow DOM 的。
使用 JS 給 Shadow DOM 增加 style 標簽
這里分為兩種場景：在主 DOM 使用 JS 、在 Custom Elements 構造函數(shù)中使用 JS。
第一種：在主 DOM 使用 JS 給 Shadow DOM 增加 style 標簽：
效果如下：
第二種：在 Custom Elements 構造函數(shù)中使用 JS 增加 style 標簽：
效果如下：
就以上兩種方式來說，第二種更符合組件化的特征，并且使用第一種方式時要注意，如果將添加 style 標簽的代碼放在定義 Custom Elements 之前會報錯(找不到自定義元素)。
引入 CSS 文件
這里使用 JS 創(chuàng)建 link 標簽，然后引入 CSS 文件給自定義元素內(nèi)部的子元素設置樣式，代碼如下：
my_card.css 代碼如下：
.card-header{
padding:10px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
}
效果如下：
當然，這里也可以在主 DOM 中使用 JS 給 Shadow DOM 引入 CSS 文件，但是，這樣做不符合組件化的特征，所以略過。
結束語
以上就是給自定義元素及其子元素進行樣式設置的基本方法總結。
~
網(wǎng)站題目：Web Components 系列之 自定義組件的樣式設置
標題網(wǎng)址：http://m.5511xx.com/article/dpshgpe.html
