将css规则应用于html,将CSS应用于HTML5自定义元素的正确方法

您可以像使用标准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):

If the cascade results in a value, use it.

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.

Otherwise use the property’s initial value. The initial value of each property is indicated in the property’s definition.

如上所述,如果元素无法识别(#1不适用),请使用属性定义中的初始值(#3适用).

所以在你的情况下：

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

>你的CSS是：scroll-content {overflow：hidden; }

>您在问题中说这段代码可以完成它应该做的事情.但除非你提到的框架为自定义元素提供了额外的样式,否则它无法工作(demo).

原因如下：

因此,这种HTML / CSS组合无法工作 – 溢出属性将被忽略,高度,宽度和任何其他不适用于内联元素的属性也将被忽略.

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

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

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

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