可以而且应该设计自定义元素的样式

Question

通常当我创建自定义元素时，我将其包装在 section 或其他适当的 HTML 元素中并为其设置样式，但这导致 DOM 看起来像 custom-element > section.

我的问题是，删除 section 并简单地将 custom-element 视为根元素并设置样式是否错误？

例如我有一个名为 tabs 的自定义元素，现在使用它时 DOM 最终看起来像 tabs > div.tabs 但我更愿意删除 div.tabs元素如果没有错的话。

所以我的问题是 "wrong" 设置我的自定义元素的样式并将它们视为任何其他 HTML 元素，还是我应该继续完全忽略我的自定义元素（尽管这很难当您使用 > 和其他选择器时这样做）?

Answer 1

自定义元素的样式绝对没有错。让您放心，自定义元素是有效的 HTML，除非您支持低于 Internet Explorer 9 的旧浏览器，否则您需要做一些额外的工作才能让浏览器识别它们。

我一直为自定义元素设计样式，我什至也为 Aurelia 的 <router-view> 自定义元素设计样式。

Answer 2

更好...

不要忘记自定义元素的默认 CSS display 是 inline.

因此，如果您想使用 border、width...您应该明确设置 display（例如 inline-block）：

custom-element {
  background: lightgreen;
  width: 60px;
  border: 1px solid blue;
}
.ok {
  display: inline-block;
}

<custom-element>This is
  <div>ugly</div>
</custom-element>
<hr>
<custom-element class="ok">That's
  <div>fine</div>
</custom-element>

Can and should you style custom elements