Стилизация пользовательских HTML-элементов

Я создал ванильный пользовательский элемент:

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

Элемент использует внутри Shadow DOM и теги <style>. Однако я хочу, чтобы пользователи определяли размер настраиваемого элемента в основной таблице стилей. Он работает, ссылаясь на настраиваемый тег, но рекомендуется ли это делать такие вещи?

Например:

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

css web-component custom-element shadow-dom
person sluijs    schedule 01.03.2015    source источник
comment
Это определенно нормально, если у вас есть единственный элемент этого типа на странице (или вы хотите применить стиль ame ко всем). Вы также можете применить к нему class [es] и / или id. Если вы не хотите дать своим пользователям возможность стилизовать теневую DOM (что на самом деле возможно, но не предназначено для этого), не стесняйтесь обращаться с настраиваемыми элементами так же, как со стандартными.   -  person Aleksei Matiushkin    schedule 01.03.2015
comment
Можете ли вы сослаться на спецификацию, чтобы подтвердить свой ответ (я не смог его найти). Если да, то если вы дадите ответ, я могу отметить его как ответ.   -  person sluijs    schedule 01.03.2015
comment
document.registerElement () устарел в пользу customElements.define () см. developer.mozilla.org/en-US/docs/Web/API/Document/   -  person gojimmypi    schedule 18.04.2021

Ответы (1)


arrow_upward
4
arrow_downward

id и class являются атрибутами HTMLElement. Следовательно, хотя вы используете HTMLElement или потомков в качестве прототипа настраиваемого элемента, вы можете применить к нему class [es] и / или id.

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

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

person Aleksei Matiushkin    schedule 01.03.2015