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

前端之家收集整理的这篇文章主要介绍了将CSS应用于HTML5自定义元素的正确方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个名为< scroll-content>的自定义 HTML5标记.实际上,我的HTML文件中的某些位置的框架会为我创建并插入此标记.现在我想修改这个标签的CSS,所以在我的CSS文件中我去了:
scroll-content{
  overflow: hidden;
}

它做了它应该做的,但这是设计自定义标签的正确方法吗?

我不能为它们添加一个类,因为我没有创建标签,框架没有,所以我无法在我的代码中访问它们,我想避免使用Javascript来查找这些标签并以这种方式添加类.

我更愿意了解修改自定义标签的标准/最安全的方法.

解决方法

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

滚动内容{…}没有任何问题,如代码中所写.

一点背景

基本级别的浏览器不知道存在哪些元素.它无法识别任何内容……直到它暴露给默认样式表(sample).

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

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

但是,可以在作者样式中将自定义元素引入浏览器.

这是一个需要考虑的重要事项:

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

07001

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组合无法工作 – 溢出属性将被忽略,高度,宽度和任何其他不适用于内联元素的属性也将被忽略.

自定义元素需要具有display:block for overflow to working(demo).

类似地,body,div,h1,p,ul作为块元素存在的唯一原因是因为它们在默认样式表(sample)中以这种方式定义.

所以,抛开支持反对自定义元素的论据,这里的底线是:

添加显示:阻止您的自定义元素,你很好.

原文链接:https://www.f2er.com/css/214759.html

猜你在找的CSS相关文章