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

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

您可以将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

到您的自定义元素，您就可以做到。