css - 样式化自定义 HTML 元素

Question

我创建了一个普通的自定义元素:

document.registerElement("my-el", { prototype: Object.create(HTMLElement.prototype) }); 

该元素使用 Shadow DOM 和 <style>里面的标签。但是，我想让用户在主样式表中定义自定义元素的大小。它通过引用自定义标签来工作，但这是执行此类操作的推荐方法吗？

例如:

my-el {
  width: 300px;
  height: 50px;
  background: green;
}

Answer 1

id 和 class 是 attributes的 HTMLElement。因此，当您使用 HTMLElement 或后代作为自定义元素的原型(prototype)时，您可以自由地对其应用 class[es] 和/或 id。

通过标签名称为自定义元素设置样式也绝对没问题，至少当页面上只有这种类型的元素时(或者你想对所有元素应用相同的样式。)

除非您想让您的用户能够设置阴影 DOM 的样式(这实际上是可能的，但并不打算这样做)，否则您可以像处理标准元素一样自由地处理自定义元素。