通过用于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中文网其他相关文章！