通過前面的學習，對自定義組件的相關概念和知識點也有了一定了解，今天我們就來學習一下給自定義元素及其子元素設置樣式的幾種方法。
直接給自定義标簽添加樣式index.html：
<style>
my-card{
display: block;
margin: 20px;
width: 200px;
height: 200px;
border: 3px solid #000;
}
</style>
<my-card></my-card>
<script src="./index.js"></script>
index.js：
class MyCard extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: "open" });
}
}
window.customElements.define("my-card", MyCard);
結果樣式生效：
需要注意的是：繼承自 HTMLElement 的自定義元素，其 style.display 默認為 inline。
由以上結果可以推論出：
在 style 标簽中增加如下樣式：
<style>
my-card {
display: block;
margin: 20px;
width: 200px;
height: 200px;
border: 3px solid #000;
}
.card-header {
padding: 10px;
font-weight: bold;
background-color: yellow;
}
</style>
<my-card></my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
this.shadow = this.attachShadow({mode: "open"});
let headerEle = document.createElement("div");
headerEle.className = "card-header";
headerEle.innerText = "My Card";
this.shadow.appendChild(headerEle);
}
}
window.customElements.define("my-card", MyCard);
</script>
結果：不生效。
通過前面的學習，我們知道：自定義元素内部實際上是一個 Shadow DOM，它和主 DOM 是相互隔離的，所以，主 DOM 中的樣式是影響不到 Shadow DOM 的。
使用 JS 給 Shadow DOM 增加 style 标簽這裡分為兩種場景：在主 DOM 使用 JS 、在 Custom Elements 構造函數中使用 JS。
第一種：在主 DOM 使用 JS 給 Shadow DOM 增加 style 标簽：
<style>
my-card {
display: block;
margin: 20px;
width: 200px;
height: 200px;
border: 3px solid #000;
}
</style>
<my-card>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
this.shadow = this.attachShadow({mode: "open"});
let headerEle = document.createElement("div");
headerEle.className = "card-header";
headerEle.innerText = "My Card";
this.shadow.appendChild(headerEle);
}
}
window.customElements.define("my-card", MyCard);
// 給 Shadow DOM 增加 style 标簽
let styleEle = document.createElement("style");
styleEle.textContent = `
.card-header{
padding:10px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
}
`;
document.querySelector("my-card").shadowRoot.appendChild(styleEle);
</script>
效果如下：
第二種：在 Custom Elements 構造函數中使用 JS 增加 style 标簽：
<style>
my-card {
display: block;
margin: 20px;
width: 200px;
height: 200px;
border: 3px solid #000;
}
</style>
<my-card>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
this.shadow = this.attachShadow({mode: "open"});
let styleEle = document.createElement("style");
styleEle.textContent = `
.card-header{
padding:10px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
}
`;
this.shadow.appendChild(styleEle);
let headerEle = document.createElement("div");
headerEle.className = "card-header";
headerEle.innerText = "My Card";
this.shadow.appendChild(headerEle);
}
}
window.customElements.define("my-card", MyCard);
</script>
效果如下：
就以上兩種方式來說，第二種更符合組件化的特征，并且使用第一種方式時要注意，如果将添加 style 标簽的代碼放在定義 Custom Elements 之前會報錯（找不到自定義元素）。
引入 CSS 文件這裡使用 JS 創建 link 标簽，然後引入 CSS 文件給自定義元素内部的子元素設置樣式，代碼如下：
<style>
my-card {
display: block;
margin: 20px;
width: 200px;
height: 200px;
border: 3px solid #000;
}
</style>
<my-card>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
this.shadow = this.attachShadow({mode: "open"});
let linkEle = document.createElement("link");
linkEle.rel = "stylesheet";
linkEle.href = "./my_card.css";
this.shadow.appendChild(linkEle);
let headerEle = document.createElement("div");
headerEle.className = "card-header";
headerEle.innerText = "My Card";
this.shadow.appendChild(headerEle);
}
}
window.customElements.define("my-card", MyCard);
</script>
my_card.css 代碼如下：
.card-header{
padding:10px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
}
效果如下：
當然，這裡也可以在主 DOM 中使用 JS 給 Shadow DOM 引入 CSS 文件，但是，這樣做不符合組件化的特征，所以略過。
結束語以上就是給自定義元素及其子元素進行樣式設置的基本方法總結。
~
~ 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隐逸王，我的公衆号是『編程三昧』，歡迎關注，希望大家多多指教！
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
