Question

我正在创建一个Aurelia项目，并为我的视图使用自定义元素。我读到使用自定义元素是更好的做法，因为它们的范围很广，但我对如何正确设置它们感到怀疑。

要获取背景颜色以填充自定义元素，我需要将其设为display:block。这需要为很多元素完成。

div {
  background-color:green;
}

div:first-child customelement {
  display:block;
}

customelement {
  background-color:blue;
}

<div>
  <customelement>
    <h1>test</h1>
  </customelement>
</div>

<div>
  <customelement>
    <h1>test</h1>
  </customelement>
</div>

是否有一种简单的方法可以为所有自定义元素制作此通用名称？也许任何SCSS方法都可以定位每个不存在的HTML5元素？

Answer 1

HTML自定义元素默认定义为undefined element，类似于span。作为浏览器以前从未见过的undefined element，它们没有默认的用户代理样式，并且将被赋予继承值，并且将被视为inline元素，除了当时所有元素的默认值由于符合W3C推荐的默认值，用户代理样式表会覆盖它。

您唯一的选择是将CSS样式顶部的所有元素定义为block级元素。

customelement, customelement2 {
  display: block;  
}
div {
  background-color:green;
}

customelement {
  background-color:blue;
}

customelement2 {
  background-color: red;
}

<div>
  <h1>Not Custom  
</div>
<div>
  <customelement>
    <h1>Custom Element</h1>
  </customelement>
</div>

<div>
  <customelement2>
    <h1>Custom Element 2</h1>
  </customelement2>
</div>

您可以阅读更多here (W3C Custom elements)，特别是第3段中的这一行

在加载脚本时，img-viewer元素将被视为未定义元素，类似于span。

在HTML5中设置自定义元素

1 个答案: