你能/应该为自定义元素设置样式吗？

Question

通常情况下，当我创建一个自定义元素时，我会将它包裹在section或其他适当的HTML元素中并进行样式设置，但这会导致DOM看起来像是custom-element > section。

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

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

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

- powerbuoy

Answer 1

为自定义元素添加样式完全没有问题。要让您放心，自定义元素是有效的HTML，除非您支持低于Internet Explorer 9的旧浏览器，否则需要进行一些额外的工作才能使浏览器识别它们。

我经常为自定义元素添加样式，甚至也为Aurelia的<router-view> 自定义元素添加样式。

- Dwayne Charrington

---

只是想说我真的很喜欢这个，它比我的代码中到处都是 section.custom-element-name 更有意义。DOM看起来也更整洁 :) - powerbuoy

哎呀，我注意到了一些有点烦人的事情。如果将自定义元素用作主路由器视图，则Aurelia不会插入实际的<custom-element>根元素。显然，这导致我的所有CSS不再针对该元素。我想对于路由器视图，我仍然需要一个包装的section或类似的东西... - powerbuoy

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>

- Supersharp