您將樣式放在網(wǎng)絡(luò)組件中的位置？

我假設(shè)我們?cè)谶@裡使用Shadow dom，因?yàn)閷?duì)我來(lái)說(shuō)，這是Web組件的最大吸引力之一：平臺(tái)的東西，它是只有平臺(tái)才能做到的獨(dú)特功能。因此，這是關(guān)於以一種不散發(fā)的方式定義Web組件的樣式，而不是一種使全局樣式?jīng)┑姆椒ǎ▋嵐苓@也非常有趣，這可以通過(guò)自定義屬性來(lái)完成，我們將在文章後面查看）。

如果您要在JavaScript內(nèi)構(gòu)建模板 - 這很不錯(cuò)，因?yàn)槟０逦淖忠约拔覀內(nèi)绾螌?shù)據(jù)很好地撒在模板中 - 您需要在JavaScript中訪問這些樣式。

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

該樣式變量從何而來(lái)？也許也是一個(gè)字面的模板？

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在，我們有了@Import，這是一個(gè)額外的HTTP請(qǐng)求，並且因表現(xiàn)出色而臭名昭著。史蒂文·蘭伯特（Steven Lambert）的一篇文章說(shuō)，它的時(shí)鐘速度較慢半秒。不理想。我認(rèn)為這樣做會(huì)更好：

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

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

  // ...
}

似乎這可能是未建立的WEB組件？我想我應(yīng)該下車並進(jìn)行測(cè)試。

現(xiàn)在我再次研究了這個(gè)問題，好像::部分已經(jīng)得到了一些蒸汽（解釋器）。所以我可以做...

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

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

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

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

這些“零件”選擇器只能觸摸其連接到的確切元素。您必須通過(guò)將零件名稱應(yīng)用於每個(gè)DOM節(jié)點(diǎn)，然後完全單獨(dú)造型來(lái)完成所有樣式。這並不有趣，尤其是因?yàn)殛幱癉OM的吸引力是我們應(yīng)該能夠編寫寬鬆的CSS選擇器，而不必?fù)?dān)心我們的H2 {}樣式會(huì)洩漏到整個(gè)地方。

看起來(lái)本機(jī)CSS模塊成為一件事情，那將是可能發(fā)生的最有用的事情。

從'./styles.css'導(dǎo)入樣式';

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

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

可構(gòu)造的樣式表也有助於在多個(gè)組件上共享樣式表。但是CSS模塊的方法看起來(lái)也可以做到這一點(diǎn)，因?yàn)楫?dāng)時(shí)樣式表已經(jīng)成為變量。

以上是通過(guò)用於Web組件的樣式選項(xiàng)進(jìn)行思考的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！