在HTML5中设置自定义元素

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

例如,要获得背景颜色以填充自定义元素,我需要将其显示为：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元素？

解决方法

默认情况下,HTML自定义元素被定义为未定义的元素,类似于范围.作为浏览器以前从未见过的未定义元素,它们没有默认的用户代理样式,并且将被赋予继承值,并且将被视为内联元素,除了用户代理样式表覆盖到期时所有元素的默认值符合W3C推荐的默认值.

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

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>

您可以在第3段中阅读更多here (W3C Custom elements),特别是此行

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