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

我有一个名为

的自定义HTML5标记。这个标签实际上是由一个框架在我的HTML文件的某些地方创建和插入的。现在我想修改这个标签的CSS，所以在我的CSS文件中我去了：

滚动内容{
溢出：隐藏；
}

它做了它应该做的，但是这是定制标签样式的正确方法吗

我不能向它们添加类，因为我不创建标记，框架会创建标记，所以我不能在代码中访问它们，我希望避免使用Javascript查找这些标记并以这种方式添加类

---

我更愿意知道修改自定义标记的标准/最安全的方法。

如果您可以避免使用自定义标记，那就更好了，因为您永远不知道这些标记何时会标准化或在某个时候有特定用途

我认为如果您为该自定义标记创建一个类会更安全，比如：

.scroll-content{
    overflow: hidden;
}

---

这应该可以做到。

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

用代码编写的

滚动内容{…}

没有问题

---

一点背景

浏览器基本上不知道存在哪些元素。它什么也认不出来直到它暴露于默认样式表（）

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

因此，可以将自定义元素定义为默认样式表中不包含的元素。（存在但浏览器不支持的元素可能共享此定义。）

但是，自定义元素可以以作者样式引入浏览器

以下是需要考虑的重要事项：

如果浏览器不识别某个元素（即，它不在默认样式表中），它将应用CSS初始值

用户代理必须首先为每个基于属性的属性分配指定的值 关于以下机制（按优先顺序）：

如果级联产生一个值，请使用它

否则，如果属性被继承，并且元素不是文档树的根，则使用父级的计算值 元素

否则，请使用属性的初始值。每个属性的初始值在属性的定义中指示

如上所述，如果元素无法识别（#1和#2不适用），请使用属性定义中的初始值（#3适用）

因此，在你的情况下：

• 您的自定义元素是：

• 您的CSS是：

  滚动内容{溢出：隐藏；}

• 在你的问题中，你说这个代码做了它应该做的事情。但是，除非您提到的框架为自定义元素提供了其他样式，否则它无法工作（）

原因如下：

• 由于
  不在默认样式表中，因此它将使用CSS初始值

• 嗯

• 但是

因此，这种HTML/CSS组合是不可能工作的，

溢出

属性将被忽略，

高度

、

宽度

以及任何其他不适用于内联元素的属性也将被忽略

自定义元素需要将

display:block

应用于

overflow

才能工作（）

类似地，

body

、

div

、

h1

、

p

、

ul

作为块元素存在的唯一原因是，它们在默认样式表（）中以这种方式定义

因此，撇开支持和反对自定义元素的论点不谈，下面是底线：

---

将

display:block

添加到自定义元素中，您就可以开始了。

是的，这非常好<代码>滚动内容{}正在选择一个标记。我相信dasherized标记将来永远不会成为标准的一部分。无论如何，OP已经说他不能添加类。是的，我没有注意他的类评论，我的不好。在这种情况下，我会像他那样设计自定义标记的样式。这可能也会有帮助：@Mehdi根据您的评论

您没有注意到…

您的回答更像是一条评论

不建议使用自定义标记。回复很好，谢谢。你有没有在旧的IE 7，8，9浏览器上测试过这个？