Web Components

[DrakesBot12]

Описание

Веб компоненты

Closes #2068
Closes #670
Closes #677
Closed #644
Closes #1415
Closes #5854

Чек-лист

• Текст оформлен согласно руководству по стилю
• Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
• Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

Что уже написано?

• <slot>
• Дополнение <template>
• Атрибут is
• Атрибут part
• Атрибут exportparts
• :host и :host()
• :defined
• :state()
• ::slotted()
• ::has-slotted
• ::part()
• window.customElements
• .attachShadow()
• .shadowRoot
• .composed
• .composedPath
• CustomStateSet
• ShadowRoot
• Статья про Shadow DOM
• Статья про Web Components

[HellSquirrel]

@DrakesBot12 привет и спасибо большое за твои дополнения. Их очень много и там тяжеловато все отсмотреть за один раз. Пожалуйста разбей этот PR на несколько частей. В идеале по одному на ишьи тогда мы можем посмотреть каждый отдельно

[DrakesBot12]

@DrakesBot12 привет и спасибо большое за твои дополнения. Их очень много и там тяжеловато все отсмотреть за один раз. Пожалуйста разбей этот PR на несколько частей. В идеале по одному на ишьи тогда мы можем посмотреть каждый отдельно

Привет, да я похоже немного переборщил засунув всё в один пиар, возможен ли такой выход что я разделю этот пиар не на каждый ишью свой пиар а на HTML часть пиара, CSS часть, JS часть и Веб-платформа?

[web-padawan]

Я бы предложил выделить в отдельные PR не по типам контента, а по логическому принципу.
Например, можно вынести в один PR статьи по shadow DOM, тк на них есть ссылки во многих статьях:

• element-attachshadow
• element-shadowroot
• event-composed
• event-composedpath
• shadowdom
• shadowroot

Далее можно в следующем PR например добавить <slot> и селекторы :host(), ::slotted() и тд.

[DrakesBot12]

Я бы предложил выделить в отдельные PR не по типам контента, а по логическому принципу. Например, можно вынести в один PR статьи по shadow DOM, тк на них есть ссылки во многих статьях:

• element-attachshadow
• element-shadowroot
• event-composed
• event-composedpath
• shadowdom
• shadowroot

Далее можно в следующем PR например добавить <slot> и селекторы :host(), ::slotted() и тд.

Хм... ну в принципе так тоже можно

[solarrust]

Поддержу идею разбиения на разные пиары. Осилить это всё за раз нереально. Чем меньше будут пиары — тем будет удобнее и легче с ними работать. Можно разбить как по разделам, так и по смыслу. Я бы пошла до конца и разбила бы на отдельные доки, но, боюсь, это создаст лавину пиаров =)

[DrakesBot12]

Поддержу идею разбиения на разные пиары. Осилить это всё за раз нереально. Чем меньше будут пиары — тем будет удобнее и легче с ними работать. Можно разбить как по разделам, так и по смыслу. Я бы пошла до конца и разбила бы на отдельные доки, но, боюсь, это создаст лавину пиаров =)

Да, я вот просто не знаю как лучше разбить: По смыслу как предложил @web-padawan или по темам

[github-actions]

Превью контента из 3966584 опубликовано.

[web-padawan]

Примеры в этой доке предлагаю обновить по аналогии с event.composed - убрать Custom Elements и использовать div

<div id="open-shadow"></div>
<div id="closed-shadow"></div>

const openHost = document.getElementById('open-shadow');
const openRoot = openHost.attachShadow({ mode: 'open' });
openRoot.innerHTML = '<button>Открытый дом</button>';

const closedHost = document.getElementById('closed-shadow');
const closedRoot = closedHost.attachShadow({ mode: 'closed' });
closedRoot.innerHTML = '<button>Закрытый дом</button>

[web-padawan]

Можно для начала добавить пару примеров с shadow DOM, например:

• js/element-attachshadow
• js/element-shadowroot
• js/event-composed
• js/event-composedpath
• js/shadowdom
• js/shadowroot

Этого для одного PR более чем достаточно, плюс все сгруппировано по разделу JS и по теме.
Упоминания CSS селекторов и custom elements придется убрать и добавлять в следующих PR.