在HTML5中设置自定义元素

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自定义元素定义为a undefined element,类似于a 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>

你可以在这里阅读更多(W3C Custom元素),特别是第3段中的这一行

在加载脚本时,该img-viewer元素将被视为未定义的元素,类似于span.