Question

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

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

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

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

Answer 1

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

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

Answer 2

它更好......

请勿忘记自定义元素的默认CSS display为inline。

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

＆＃13;

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

＆＃13;

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

＆＃13;