Symbiote.js 2.0

[i360u]

По умолчанию, у Симбиот-компонентов Shadow DOM нет, это сделано для производительности и он далеко не всегда нужен. Но его можно включить флагом:

export class MyComponent extends Symbiote {

  renderShadow = true;

}

После этого в шаблонах заработают слоты, и в стилях можно будет использовать селекторы :host`, все по стандарту. Интересная деталь, там есть интерфейсы для работы со стилями shadowStyles и rootStyles. Эти штуки можно использовать как по отдельности, так и совместно. Так вот, rootStyles определяет стили компонента в ближайшем по иерархии Shadow DOM (если есть) и влияет на компонент только в своем скоупе, даже если сам не имеет собственной теневой разметки. Если Shadow DOM не используется вообще - стили будут добавлены в контекст самого документа. Положение компонента определяется им самим в рантайме, и вам не нужно об этом специально думать.

[i360u]

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

[nstrek]

Ссылку бы на гитхаб в конце статьи, так больше звездочек поставят, а то ходить куда-то искать еще)

[i360u]

Действительно. Добавил.

[alexnozer]

Интересно, надо будет взглянуть. Как раз изучаю инструменты для работы с веб-компонентами.

А описание этой библиотеки в статье и их философия буквально соответствует моими мыслями о переусложнении и абстракциях. Читал и в уме было "Вот да! Согласен! В точку!"

[dofroy]

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

Автору статьи удачи!

[i360u]

Ну у меня потому и указаны ссылки в профиле, что я этого не скрываю... Зачем бы мне это делать?