样式化自定义HTML元素

Question

我创建了一个vanilla Custom Element：

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

该元素在其中使用Shadow DOM和<style>标记。但是，我想让用户在主样式表中定义自定义元素的大小。它的工作原理是引用自定义标记，但这是推荐的做法吗？

例如：

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

Answer 1

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

要设置自定义元素的样式，它的标记名称也绝对可以，至少在页面上有这种类型的唯一元素时（或者你想对所有这些元素应用相同的样式。）

除非你想让你的用户能够设置阴影DOM的样式（这实际上是可行的，但不打算这样做），你可以像处理标准元素一样处理自定义元素。