Custom elements v1: какие советы и идеи по реализации?

Question

[Антон Шаманов]

Прочел пару статей по пользовательским элементам и теневому dom и решил попробовать создав обертку для тега picture. Какие будут советы и пожелания? (:

Comments

[spyhere]

А какая мотивация этих компонентов?

[Руслан Лопатин]

Нельзя манипулировать деревом DOM внутри конструктора. Запрещено стандартом. Обычно эту логику помещают в connectedCallback.

[Руслан Лопатин]

Кроме того, нет особого смысла в подобных компонентах, если они никак не реагируют на изменения атрибутов. В вашем же примере атрибуты читаются один раз. Разберитесь с attributeChangedCallback.

А когда поймёте, сколько ручной работы нужно делать, чтобы оно заработало как надо, то скорее всего захотите воспользоваться готовыми решениями. Типа LitElement.

[Антон Шаманов]

В вашем же примере атрибуты читаются один раз.

а сеттеры и геттеры на что? чтобы выбрать готовое для начала нужно разобраться как оно работает хотя бы в общих чертах

[Антон Шаманов]

spyhere, компактно и интерактивно - по сути фреймворки вроде vue и ember используют что-то подобное.

[Антон Шаманов]

Руслан Лопатин, а манипуляции с теневым dom разве одно и тоже что и манипуляция dom элемента?

[Руслан Лопатин]

Антон Шаманов:
> а сеттеры и геттеры на что?

Это _свойства объекта_ а не _атрибуты элемента_. Последние устанавливаются только через setAttribute() или через разметку.

> а манипуляции с теневым dom разве одно и тоже что и манипуляция dom элемента?

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

[Антон Шаманов]

Руслан Лопатин

Это _свойства объекта_ а не _атрибуты элемента_

учи мат.часть

[Руслан Лопатин]

Сам-то читал, учитель? Попробуй открыть свою страницу в DOM Inspector и изменить любой атрибут своего элемента. Изменения при этом не отразятся нигде.

Для того, чтобы слушать изменения в значениях атрибутов и придуман attributeChangedCallback

[Антон Шаманов]

Руслан Лопатин, dom инспектор в каком-то браузере конечно может все что угодно, но в js коде все ок