样式自定义 HTML 元素

Question

我创建了一个香草自定义元素：

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

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

例如：

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

Answer 1

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

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

除非您想让您的用户能够设置阴影样式 DOM（这实际上是可能的，但不是有意为之），请按照处理自定义元素的方式随意处理自定义元素标准的。

Styling custom HTML elements