我正在创建一个 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 元素?
最佳答案
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.
关于html - HTML5 中的样式自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40081973/