我有一个名为的自定义HTML5标记<scroll-content>.实际上,我的HTML文件中的某些位置的框架会为我创建并插入此标记.现在我想修改这个标签的CSS,所以在我的CSS文件中我去了:
scroll-content{
overflow: hidden;
}
它做了它应该做的,但这是设计自定义标签的正确方法吗？
我不能为它们添加一个类,因为我没有创建标签,框架没有,所以我无法在我的代码中访问它们,我想避免使用Javascript来查找这些标签并以这种方式添加类.
我更愿意了解修改自定义标签的标准/最安全的方法.
Mic*_*l_B 17
您可以像使用标准HTML元素一样将CSS应用于自定义元素.
scroll-content { ... }你的代码中写的没有任何问题.
一点背景
基本级别的浏览器不知道存在哪些元素.在它暴露于默认样式表(样本)之前,它无法识别任何内容.
默认样式表将浏览器引入HTML元素.
因此,可以将自定义元素定义为默认样式表中未包含的元素.(存在但不受浏览器支持的元素可以共享此定义.)
但是,可以在作者样式中将自定义元素引入浏览器.
这是一个需要考虑的重要事项:
如果浏览器无法识别元素(即,它不在默认样式表中),则它将应用CSS 初始值.
用户代理必须首先根据以下机制为每个属性分配指定的值(按优先顺序排列):
如果级联产生值,请使用它.
否则,如果继承该属性并且该元素不是文档树的根,请使用父元素的计算值.
否则使用属性的初始值.每个属性的初始值在属性的定义中指示.
如上所述,如果元素无法识别(#1不适用),请使用属性定义中的初始值(#3适用).
所以在你的情况下:
您的自定义元素是: <scroll-content>
你的CSS是: scroll-content { overflow: hidden; }
你在问题中说这个代码做了它应该做的事情.但除非你提到的框架为自定义元素提供了额外的样式,否则它无法工作(演示).
原因如下:
由于<scroll-element>不在默认样式表中,因此它将使用CSS初始值.
因此,这种HTML/CSS组合无法正常工作 - overflow属性将被忽略height,width以及任何其他不适用于内联元素的属性.
自定义元素需要display: block申请overflow工作(演示).
类似地,唯一的原因body,div,h1,p,ul存在如块元素是因为它们被以这种方式定义的默认的样式表(样品).
所以,抛开支持和反对自定义元素的论据,这里的底线是:
添加display: block到您的自定义元素,你很好.