Web components series (VIII) -- custom component style settings

Preface

Through the previous study , I also have a certain understanding of the relevant concepts and knowledge points of custom components , Today, let's learn some ways to style custom elements and their children .

Add styles directly to custom labels

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);

The result style takes effect ：

It should be noted that ： Inherited from HTMLElement The custom elements of , Its style.display The default is inline.

From the above results, it can be inferred that ：

1. Add... To custom elements class, And then through class The name setting style can take effect ;
2. Add inline styles to custom elements , It works ;
3. Give... In the custom element constructor this Add the style , It works .

Style the child elements inside the custom element

In the main DOM Set... By class name

stay style Add the following style to the label ：

<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>

result ： Don't take effect .

Through the previous study , We know ： Inside the custom element is actually a Shadow DOM, It and the Lord DOM It's isolated from each other , therefore , Lord DOM The style in does not affect Shadow DOM Of .

Use JS to Shadow DOM increase style label

There are two scenarios ： In the main DOM Use JS 、 stay Custom Elements In the constructor JS.

The first one is ： In the main DOM Use JS to Shadow DOM increase style label ：

<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); //  to  Shadow DOM  increase  style  label  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>

The effect is as follows ：

The second kind ： stay Custom Elements In the constructor JS increase style label ：

<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>

The effect is as follows ：

In terms of the above two ways , The second is more in line with the characteristics of componentization , And when using the first method, pay attention to , If... Will be added style The code of the tag is placed in the definition Custom Elements I would have reported a mistake （ Custom element not found ）.

introduce CSS file

Use here JS establish link label , Then introduce the CSS The file sets the style for the child elements inside the custom element , The code is as follows ：

<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 The code is as follows ：

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

The effect is as follows ：

Of course , It can also be in the Lord DOM Use in JS to Shadow DOM introduce CSS file , however , This is not in line with the characteristics of componentization , So skip .

Conclusion

The above is a summary of the basic methods of styling custom elements and their child elements .

~

The end of this paper , Thank you for reading ！

~

Learn interesting knowledge , Make interesting friends , Create interesting souls ！

Hello everyone , I am a 〖 The samadhi of programming 〗 The author of Hermit King , My official account is 『 The samadhi of programming 』, Welcome to your attention , I hope you can give me more advice ！