Веб-компоненты проще, чем вы думаете

[TheGodfather]

<apocalyptic-warning>
  <span slot="whats-coming">Halitosis Laden Undead Minions</span>
</apocalyptic-warning>

<template>
  <p>The <slot name="whats-coming">Zombies</slot> are coming!</p>
</template>

Вставил в блокнот, сохранил как .html — не работает. Если вы пишете/переводите статью о конкретном фреймворке, то, пожалуйста, потрудитесь упомянуть во введении, о каких фреймворках речь.

[sldo_ru]

В данном случае речь идет не о фреймворке, а о нативной реализации веб-компонентов через Shadow DOM, но, чтобы он окончательно заработал, необходимо дописать код на JavaScript. Что касается отображения в вашем случае, вот пример с рабочим кодом: codepen.io/sldo/pen/ExNMXEV. Браузер отображает текст, но необходимо дописывать JS для полноценной реализации.

[hello_my_name_is_dany]

Так Web Components и используется.
caniuse.com/custom-elementsv1

[fedorro]

В следующем разделе, «Регистрация компонента», приведен необходимый JS-код, который заставляет это работать. Сам не проверял, но должно…

[justboris]

Получается ситуация "каши из топора".

Технически, мы закончили писать собственный компонент

И показывают несколько строк html как будто все уже готово. И только потом вспоминают, что нужно еще JS и CSS...

[sldo_ru]

Дополнил примечанием, чтобы было понятнее

[justboris]

спасибо, теперь перевод стал в чем-то лучше оригинала :)

[hisbvdis]

Автор, укажите, что это перевод и укажите ссылку на оригинал статьи

[sldo_ru]

Перевод и автор указаны в начале статьи

[hisbvdis]

Странно.
В мобильной версии не отображается.
Прошу прощения за неуместное замечание

[taujavarob]

Прошу прощения за неуместное замечание

Это Хабр. И проблема с «невидимостью» для многих перевода (того то статья есть перевод) это родимое пятно Хабра.
Это можно вылечить. И «лекарство» не раз предлагали Хабру, но… редакторы Хабра категорически не приемлют этого и упрямо держатся за плашку «перевод», которая многим не видна никак.
Традиция Хабра.
Бывает.

[OlegPatron92]

Мне кажется, или Vue использует эту технологию?!

[c01nd01r]

Не использует, про синтаксис шаблонов похож.

[justboris]

Vue использует те же названия (template и slot), но имплементация у них своя и поведение элементов может отличаться

[sldo_ru]

Под капотом Vue, как и React, использует модель виртуального DOM (VDOM). Она создает абстракцию в виде объекта представления иерархии компонентов для их сравнивания. Однако это разные концепции.

VDOM согласует изменения для оптимизированного рендеринга и вставляет их в DOM, в то время как Shadow DOM скорее позволяет включать поддерево элементов DOM в рендеринг, но не в основное DOM. Хотя соглашусь, что концепции похожи. Так же есть слоты, компоненты и т.д.

[LeshiyUrban]

Svelte может взять на себя обвязку (отслеживание свойств, стилизация и тп) и скомпилироваться в вебкомпонент. Как пример такого компонента: https://reddec.net/demo/github-card/ (исходный код https://github.com/reddec/github-card)

[mrFox]

Достаточно давно использую Svelte и некоторые вещи в нем казались не совсем логичными, что ли. В один момент заинтересовался веб-компонентами и решил реализовать свой Svelte, но «типа, как надо» и с веб-компонентами на выходе. В результате изобрел… Svelte :) Зато теперь он стал для меня логичен :)

[sojey80135]

а зачем тут ручной js? вы не знаете что недавно появились модули из коробки?

[Stefan64]

Красавчик!!! Рекомендую!!! Статья качественно выполнена !