html - HTML5 中的样式自定义元素

Question

我正在创建一个 Aurelia 元素并为我的 View 使用自定义元素。我读到使用自定义元素是更好的做法，因为它们存在于范围内，但我对如何正确设置它们的样式持怀疑态度。

例如，为了让背景色填充自定义元素，我需要将其设为 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)特别是第三段中的这一行

While the script is loading, the img-viewer element will be treated as an undefined element, similar to a span.