小编典典

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

css

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

scroll-content{
  overflow: hidden;
}

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

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

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


阅读 413

收藏
2020-05-16

共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属性将被忽略,因为会heightwidth并且不适用任何其他属性内联元素。

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

类似地,唯一的原因bodydivh1pul的形式存在的块元素是因为它们被以这种方式定义的默认的样式表(样品)。

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

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

2020-05-16