Стайлинг пользовательских элементов 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 или потомки в качестве прототипа настраиваемого элемента, вы можете применить к нему class [es] и/или id.

Чтобы стиль пользовательского элемента по его имени тега, безусловно, отлично либо, по крайней мере, пока есть единственный элемент этого типа на странице (или вы хотите применить тот же стиль для всех из них.)

Если вы не хотите, чтобы ваши пользователи могли создавать скрытые DOM (которые на самом деле возможны, но не предназначены для выполнения), не стесняйтесь обращаться с настраиваемым элементом так же, как и со стандартными.