css - 将 CSS 应用于 HTML5 自定义元素的正确方法

Question

我有一个名为 <scroll-content> 的自定义 HTML5 标签.这个标签实际上是由一个框架在我的 HTML 文件中的某些地方为我创建和插入的。现在我想修改这个标签的 CSS，所以在我的 CSS 文件中我去了:

scroll-content{
  overflow: hidden;
}

它做了它应该做的，但这是设置自定义标签样式的正确方法吗？

我无法向它们添加类，因为我没有创建标签，框架创建了标签，所以我无法在我的代码中访问它们，我想避免使用 Javascript 来查找这些标签并添加类方式。

我更愿意知道修改自定义标签的标准/最安全的方法。

Answer 1

您可以像对标准 HTML 元素一样将 CSS 应用于自定义元素。

scroll-content { ... } 没问题，如您的代码中所写。

---

一点背景

浏览器在基本层面上并不知道存在哪些元素。它不识别任何东西...直到它暴露给默认样式表 ( sample )。

默认样式表向浏览器介绍 HTML 元素。

自定义元素因此可以定义为不包含在默认样式表中的元素。 (存在但不受浏览器支持的元素可以共享此定义。)

但是，可以将自定义元素以作者样式引入浏览器。

这里有一些重要的事情需要考虑:

如果浏览器无法识别某个元素(即它不在默认样式表中)，它将应用 CSS 初始值。

6.1.1 Specified values

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it.

2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.

3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

如上所述，如果无法识别元素(#1 和#2 不适用)，请使用属性定义中的初始值(#3 适用)。

所以在你的情况下:

• 您的自定义元素是:<scroll-content>

• 您的 CSS 是:scroll-content { overflow: hidden; }

• 您在问题中说这段代码做了它应该做的事情。但是除非您提到的框架为自定义元素提供额外的样式，否则它无法工作(demo)。

原因如下:

• 自 <scroll-element>不在默认样式表中，它将使用 CSS 初始值。

• 嗯，the initial value of the display property is inline .

• 但是the overflow property only works on block elements .

所以这个 HTML/CSS 组合不可能工作 – overflow属性将被忽略，height 也是如此。 , width以及任何其他不适用于内联元素的属性。

自定义元素需要有 display: block申请overflow工作 ( demo )。

同样，唯一的原因body , div , h1 , p , ul作为 block 元素存在是因为它们在默认样式表 (sample) 中以这种方式定义。

因此，抛开支持和反对自定义元素的争论不谈，这里是底线:

添加 display: block到您的自定义元素，您就可以开始了。