我正在创建一个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>
解决方法
默认情况下,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-viewerelement will be treated as an undefined element,similar to a 07001.