Веб-компоненты — набор API веб-платформы, с помощью которых можно создавать собственные повторно используемые DOM-элементы с изолированной разметкой, стилями и поведением.
Понятнее, конечно же, не стало
Определение
Веб-компоненты — набор API веб-платформы, с помощью которых можно создавать собственные повторно используемые DOM-элементы с изолированной разметкой, стилями и поведением.
API веб-платформы ⚙️
API веб-платформы
Custom Elements
Templates
Shadow DOM
HTML Imports* * Deprecated
Shadow Parts
Element Internals
Custom States
Declarative Shadow DOM
Adopted Stylesheets
...
DOM
Classes
ES Modules
Promises
Custom Properties
...
Зонтичный термин ☂️
Custom Elements
class QuantityInput extends HTMLElement { constructor() {} // Элемент создан connectedCallback() {} // Элемент добавлен в DOM disconnectedCallback() {} // Элемент удалён из DOM adoptedCallback() {} // Элемент перенесён из другого документа static observedAttributes = [] // Наблюдаемые атрибуты attributeChangedCallback(name, oldVal, newVal) {} // Изменился наблюдаемый атрибут}customElements.define('quantity-input', QuantityInput); // регистрация
Custom Elements
class QuantityInput extends HTMLElement { static formAssociated = true; // Элемент должен ассоциироваться с формой connectedCallback() { // Возможность работы с формами, валидацией, пользовательскими состояниями и ARIA this._internals = this.attachInternals(); } formAssociatedCallback(form) {} // Элемент ассоциирован с формой formDisabledCallback(disabled) {} // Форма отключена formResetCallback() {} // Форма сброшена formStateRestoreCallback(state, mode) // Форма восстановлена или сработал autocomplete}customElements.define('quantity-input', QuantityInput); // регистрация
class QuantityInput extends HTMLElement { connectedCallback() { // Находим template const t = document.querySelector('#quantity-input'); // Добавляем Shadow DOM this.attachShadow({ mode: 'open' }); // Клонируем шаблон this.shadowRoot.innerHTML = t.content.cloneNode('true'); }}customElements.define('quantity-input', QuantityInput);
Определение
Веб-компоненты — набор API веб-платформы, с помощью которых можно создавать собственные повторно используемые DOM-элементы с изолированной разметкой, стилями и поведением.
Веб-компоненты — набор API веб-платформы, с помощью которых можно создавать собственные повторно используемые DOM-элементы с изолированной разметкой, стилями и поведением.
Я *должен* добавить, что это замечательно, что люди дали имена полезным подкомбинациям этих примитивов. Мы не стали их называть, но предвидели, что некоторые пользователи будут игнорировать, например, <template> или CE [Custom Elements] или SD [Shadow DOM] и просто будут использовать другие части. С моей точки зрения, это прекрасно и работает как задумано.
Приложение создается несколькими командами с использованием различных инструментов и подходов, но его разрозненные части должны быть объединены в единое целое с сохранением высокой производительности.
Чтобы решить эту задачу, Adobe обратилась к веб-компонентам и библиотеке Lit. Элементы интерфейса Photoshop созданы на основе библиотеки Spectrum Web Components [...], которая работает с любым фреймворком или без него.
В Edge 122 интерфейс Browser Essentials стал более отзывчивым. Интерфейс стал на 42% быстрее для пользователей Edge и на 76% быстрее для тех, кто работает на устройствах без SSD или у кого менее 8 ГБ ОЗУ!
Избранное — еще одна функция, которая получила улучшения отзывчивости интерфейса в Edge 124. Независимо от того, развернуто или свернуто избранное, работа с ним должна стать на 40% быстрее.
Web Components: Just in the Nick of Time
Introduction to Web Components, W3C Working Draft 22 May 2012
Tom Occhino and Jordan Walke: JS Apps at Facebook
JavaScript | 2024 | The Web Almanac by HTTP Archive
Chrome Platform Status: CustomElementRegistryDefine
Выпуск 443 — Веб-стандарты
What We Do In The Shadow (DOM)
An Attempted Taxonomy of Web Components
Отказаться от зависимостей и не умереть
🤝
🤝
🤝
Using Web Components to Scale Your UX
Innovations with FAST Web Components
