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

Question

我有一个名为的自定义HTML5标签<scroll-content>。实际上，此标记是由框架在HTML文件内部的某些位置为我创建和插入的。现在，我想修改此标记的CSS，以便在我的CSS文件中：

scroll-content{
  overflow: hidden;
}

它确实完成了预期的工作，但这是自定义标签样式的正确方法吗？

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

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

Answer 1

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

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

一点背景

在基本级别上，浏览器不知道存在哪些元素。它无法识别任何内容， 直到将其暴露给默认样式表（sample） 为止 。

默认样式表将浏览器引入HTML元素。

因此，可以将自定义元素定义为默认样式表中未包含的元素。（存在但浏览器不支持的元素可以共享此定义。）

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

这里有一些重要的考虑因素：

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

6.1.1指定值

用户代理必须首先根据以下机制（优先顺序）为每个属性分配一个指定的值：

1. 如果级联产生一个值，请使用它。

2. 否则，如果该属性被继承并且该元素不是文档树的根，请使用父元素的计算值。

3. 否则，请使用属性的初始值。每个属性的初始值在属性的定义中指示。

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

因此，在您的情况下：

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

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

• 您在问题中说这段代码可以实现预期的功能。但是，除非您提到的框架为自定义元素提供其他样式，否则它将无法工作（demo）。

原因如下：

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

• 好，该display属性的初始值为inline。

• 但是该overflow属性仅适用于块元素

因此，有没有办法这个HTML / CSS组合可以工作-
overflow属性将被忽略，因为会height，width并且不适用任何其他属性内联元素。

需要自定义元素才能display:block申请overflow工作（demo）。

类似地，唯一的原因body，div，h1，p，ul的形式存在的块元素是因为它们被以这种方式定义的默认的样式表（样品）。

因此，撇开支持和反对自定义元素的参数，这是底线：

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