您可以将CSS应用于自定义元素，就像应用于标准HTML元素一样。
scroll-content { ... }没有任何问题，就像代码中所写的那样。

• 一点背景 *

基本的浏览器不知道有什么元素存在，它不识别任何东西......***直到***它暴露在默认的样式表（sample）中。
默认样式表将浏览器引入HTML元素。
因此，可以将自定义元素定义为默认样式表中不包含的元素。（存在但浏览器不支持的元素可以共享此定义。）
但是，可以以作者样式将自定义元素引入浏览器。

• 这里有一些重要的考虑：*

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

• • 6.1.1规定值**

用户代理必须首先根据以下机制（按优先级顺序）为每个属性分配指定的值：
1.如果级联产生一个值，则使用该值。
1.否则，如果属性是继承的，并且元素不是文档树的根，则使用父元素的计算值。
1.否则使用属性的初始值。每个属性的初始值在属性定义中指明。
如上所述，如果元素无法识别（#1和#2不适用），则使用属性定义中的初始值（#3适用）。
所以在你的例子中：

• 您的自定义元素为：<scroll-content>
• 您的CSS是：scroll-content { overflow: hidden; }
• 您在问题中说这段代码做了它应该做的事情，但是除非您提到的框架为自定义元素提供了额外的样式，否则它无法工作（demo）。

原因如下：

• 由于<scroll-element>不在默认样式表中，因此它将使用CSS初始值。
• display属性的初始值是inline。
• 但是overflow属性只对块元素有效。

因此，这种HTML/CSS组合不可能工作-overflow属性将被忽略，height、width和其他任何不适用于内联元素的属性也将被忽略。
自定义元素需要应用display: block才能使overflow工作（demo）。
同样，body、div、h1、p、ul作为块元素存在的唯一原因是它们在默认样式表（sample）中以这种方式定义。
因此，撇开支持和反对定制元素的争论，下面是底线：

• 将display: block添加到您的自定义元素中，您就可以开始使用了。*

不能存在名称中带有连字符“-”的标准标签，因此不存在此问题。

最好避免使用自定义标记，因为您永远不知道这些标记何时会标准化或在某个时候有特定的用法。
我认为如果您为该自定义标记创建一个类会更安全，类似于：

.scroll-content{
    overflow: hidden;
}

这个应该够了。