将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

类似地，唯一的原因

body

div

h1

p

ul

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

添加

display: block