Web Components — это набор встроенных в браузер API для создания переиспользуемых, инкапсулированных пользовательских HTML-элементов — независимых от фреймворка и основанных на стандартах. Три технологии работают вместе:
Web Components — это набор встроенных в браузер API для создания переиспользуемых, инкапсулированных пользовательских HTML-элементов — независимых от фреймворка и основанных на стандартах. Три технологии работают вместе:
<template>, <slot>) — инертная, переиспользуемая разметка.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Стили внутри shadow root ограничены по области — CSS страницы не может проникнуть внутрь, а CSS компонента не может протечь наружу. Это решает проблему глобального CSS нативным способом:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components позволяют создавать переиспользуемые виджеты, которые работают в любом фреймворке (или без фреймворка) с истинной инкапсуляцией стилей/DOM — идеально для дизайн-систем и микрофронтенда, совместно используемого командами с разными технологическими стеками.
Так же библиотеки вроде Shoelace поставляют компоненты, независимые от фреймворка.
Компромиссы (многословный API, сложность SSR/styling) означают, что разработчики приложений часто всё ещё предпочитают React/Vue, но примитив платформы мощный и основан на стандартах.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать