通過用於Web組件的樣式選項進行思考

您將樣式放在網絡組件中的位置？

我假設我們在這裡使用Shadow dom，因為對我來說，這是Web組件的最大吸引力之一：平台的東西，它是只有平台才能做到的獨特功能。因此，這是關於以一種不散發的方式定義Web組件的樣式，而不是一種使全局樣式洩漏的方法（儘管這也非常有趣，這可以通過自定義屬性來完成，我們將在文章後面查看）。

如果您要在JavaScript內構建模板 - 這很不錯，因為模板文字以及我們如何將數據很好地撒在模板中 - 您需要在JavaScript中訪問這些樣式。

 const模板=`
   $ {styles} 
  <div>
    <h2 id="title"> $ {title} </h2>
    $ {content}
  </div>
`;

該樣式變量從何而來？也許也是一個字面的模板？

 const樣式=`
  ：主持人 {
    背景：白色；
  }
  H2 {
    字體：900 1.5REM/1.1 -System-UI，sans-serif;
  }
`;

我想這很好，但是它使您試圖構建此Web組件的班上某個地方的一大凌亂的代碼塊。

另一種方法是模板並製作塊的部分。

 
  
    ：主持人 {
      背景：白色；
    }
    H2 {
      字體：900 1.5REM/1.1 -System-UI，sans-serif;
    }
  

  <div>
    <h2> </h2>
    <p> </p>
  </div>

我可以看到這種吸引力，因為它將HTML保持在HTML中。我不喜歡它的是您必須做一堆手動的shadowroot.queryselector（“＃title-hook”）。 innerhtml = mydata.title;工作以充實該模板。那感覺不像是方便的模板。我也不喜歡您只需要在HTML中的某個位置將此模板插入。在哪裡？我不知道。只是把它卡在那裡。 chuck。

CSS也被移出JavaScript，但它只是從一個尷尬的位置移到了另一個位置。

如果我們想將CSS保存在CSS文件中，我們可以這樣做：

 
  
    @Import“ /css/components/card.css”;
  

  <div>
    <h2> </h2>
    <p> </p>
  </div>

（顯然，使用顯然是棄用的。）

現在，我們有了@Import，這是一個額外的HTTP請求，並且因表現出色而臭名昭著。史蒂文·蘭伯特（Steven Lambert）的一篇文章說，它的時鐘速度較慢半秒。不理想。我認為這樣做會更好：

類MyComponent擴展了HTMlelemt {
    
  constructor（）{
    極好的（）;
    this.attachshadow（{mode：“ open”}）;

    fetch（'/css/組件/card.css'）
      。
      。然後（data => {
        令node = document.createelement（'style'）;
        node.innerhtml = data;
        document.body.body.appendchild（node）;
      }）;
  }

  // ...
}

似乎這可能是未建立的WEB組件？我想我應該下車並進行測試。

現在我再次研究了這個問題，好像::部分已經得到了一些蒸汽（解釋器）。所以我可以做...

 const模板=`
  <div part="“" card>
    <h2 id="title"> $ {title} </h2>
    $ {content}
  </div>
`;

…然後在僅適用於陰影DOM內的全局樣式表中編寫樣式，例如：

 my-card :: part（card）{
  背景：黑色；
  顏色：白色；
}

…哪個有瀏覽器支持，但也許還不夠？

這些“零件”選擇器只能觸摸其連接到的確切元素。您必須通過將零件名稱應用於每個DOM節點，然後完全單獨造型來完成所有樣式。這並不有趣，尤其是因為陰影DOM的吸引力是我們應該能夠編寫寬鬆的CSS選擇器，而不必擔心我們的H2 {}樣式會洩漏到整個地方。

看起來本機CSS模塊成為一件事情，那將是可能發生的最有用的事情。

從'./styles.css'導入樣式';

類骨髓擴展了htmlelemt {
  constructor（）{
    this.attachshadow（{mode：open}）;
    this.shadowroot.AdoptedStyleSheets = [styles];
  }
}

但是，我不確定這是任何形式的提升。似乎這將是這與@Import之間的洗滌。我不得不說我更喜歡天然CSS模塊的清晰度和語法。很高興在使用JavaScript時編寫JavaScript。

可構造的樣式表也有助於在多個組件上共享樣式表。但是CSS模塊的方法看起來也可以做到這一點，因為當時樣式表已經成為變量。

以上是通過用於Web組件的樣式選項進行思考的詳細內容。更多資訊請關注PHP中文網其他相關文章！