i360u Feb 7 2020 at 15:29

Веб компоненты без Shadow DOM

5 min

4.3K

Website development*JavaScript*Browsers

Tutorial

Comments 6

CoolCmd Feb 7 2020 at 18:58

this._contents = new DocumentFragment();
this._contents.appendChild(template.content.cloneNode(true));

cloneNode() возвращает DocumentFragment. зачем в первой строке создавать еще один?

i360u Feb 7 2020 at 19:51

Вы правы, можно не создавать. Я хотел показать момент создания более явным образом, т.к. вставка фрагмента из темплейта может быть опциональным действием. Но, действительно, на практике лучше сделать так:

this._contents = template.content.cloneNode(true);

justboris Feb 8 2020 at 13:41

Проблема с инлайн-стилями в том, что они не совместимы с CSP. Придется прописать style-src unsafe-inline, что небезопасно, как видно из названия.

Безопасными их получится сделать, если задавать стили программно, element.style.color = '#f00'; но тогда теряется изящность вашего подхода с template-элементами.

justboris Feb 8 2020 at 13:45

А вообще, интересная тенденция получается. Если есть проблемы с ShadowDOM – просто не используем ShadowDOM. Можно пойти еще дальше и заменить CustomElements на ванильные конструкторы:

new MyWidget(document.querySelector('[data-my-widget]')).render();

и все станет вообще прекрасно. Польза веб-компонентов сильно переоценена.

i360u Feb 8 2020 at 15:15

А вообще, интересная тенденция получается. Если есть проблемы с ShadowDOM – просто не используем ShadowDOM.

Да, в этом все дело: вы сами решаете нужен вам Shadow DOM или нет в каждом конкретном случае.

Можно пойти еще дальше и заменить CustomElements на ванильные конструкторы

Можно. Но селекторы могут быть сильно медленнее и у вас не будет фишек типа disconnectedCallback.

SuperCat911 Jan 2 at 18:23

@i360u,Честно говоря, странно, что вы решили использовать атрибут id для идентификации элемента. Если речь идет о переиспользовании HTML-фрагментов, содержимое которых полностью вставляется в DOM, то уж лучше использовать классы или аттрибуты, либо генерируемые id.

А так, идея создавать компоненты без shadowDom очень хорошая. Сам подобную технику использую.

Show the best of all time