您可以并且应该为自定义元素设置样式答案

【问题标题】：Can and should you style custom elements您可以并且应该为自定义元素设置样式
【发布时间】：2017-07-04 00:34:28
【问题描述】：

通常当我创建一个自定义元素时，我将它包装在 section 或其他适当的 HTML 元素和样式中，但这会导致 DOM 看起来像 custom-element > section。

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

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

所以我的问题是设置自定义元素的样式并将它们视为任何其他 HTML 元素是“错误的”，还是我应该继续完全忽略我的自定义元素（即使在使用 > 时很难这样做）和其他选择器）？

【问题讨论】：

【解决方案1】：

这样更好……

不要忘记自定义元素的默认 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

只是想说我真的很喜欢这个，它比我的代码中的section.custom-element-name 更有意义。 DOM 看起来也更整洁 :)
哦，快点，不过我注意到有些烦人的事情。如果自定义元素用作主路由视图，Aurelia 不会插入实际的 <custom-element> 根元素。显然，这导致我所有的 CSS 不再针对该元素。我想对于路由器视图，我仍然需要一个包装 section 或类似的然后......