{"draftJsState":{"blocks":[{"data":{"image":{"id":"667181dc13c25a66aac11c8b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9cao1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет, коллеги! Сегодня я хочу поговорить с вами о веб-компонентах и о том, как они могут изменить подход к модульной разработке. Эта тема становится все более актуальной, поэтому давайте разберемся, что это такое, почему они важны и как их использовать в ваших проектах.","type":"unstyled","key":"7fj5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Что такое веб-компоненты?","type":"header-two","key":"5cj1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-компоненты – это набор веб-стандартов, которые позволяют разработчикам создавать повторно используемые компоненты с собственными HTML-тегами и функциональностью. Основные технологии, на которых основаны веб-компоненты:","type":"unstyled","key":"em20o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Custom Elements: Позволяет создавать собственные HTML-элементы с кастомным поведением.","type":"ordered-list-item","key":"1kfvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Shadow DOM: Обеспечивает изоляцию стилей и скриптов внутри компонента, чтобы избежать конфликтов с остальным кодом.","type":"ordered-list-item","key":"3qpte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"HTML Templates: Позволяет определять шаблоны для повторного использования.","type":"ordered-list-item","key":"9hbb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Почему веб-компоненты важны?","type":"header-two","key":"7u0ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"1. Повторное использование","type":"header-three","key":"drrl2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-компоненты позволяют создавать модули, которые можно легко повторно использовать в разных проектах или частях одного проекта. Это значительно ускоряет разработку и уменьшает количество дублирующегося кода.","type":"unstyled","key":"3v2v1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"2. Изоляция и независимость","type":"header-three","key":"5gf5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодаря Shadow DOM, компоненты имеют свои собственные стили и скрипты, которые не конфликтуют с остальным кодом. Это делает их более надежными и предсказуемыми.","type":"unstyled","key":"ffacf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"3. Совместимость","type":"header-three","key":"28bcp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-компоненты поддерживаются большинством современных браузеров и могут использоваться с любыми фреймворками или библиотеками. Это делает их универсальным инструментом для модульной разработки.","type":"unstyled","key":"3gttf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Как использовать веб-компоненты?","type":"header-two","key":"ar2sj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"1. Создание Custom Element","type":"header-three","key":"6aeb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":62,"style":"ITALIC"}],"text":"Давайте начнем с простого примера, создадим кастомный элемент :","type":"unstyled","key":"941fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"javascript","type":"unstyled","key":"5fjln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"class MyButton extends HTMLElement {","type":"unstyled","key":"20ebt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"constructor() {","type":"unstyled","key":"3mt15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"super();","type":"unstyled","key":"64b7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"this.attachShadow({ mode: 'open' });","type":"unstyled","key":"6rpvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":"const button = document.createElement('button');","type":"unstyled","key":"2iofg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"}],"text":"button.textContent = 'Click me';","type":"unstyled","key":"84ffv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"}],"text":"this.shadowRoot.append(button);","type":"unstyled","key":"ao1cg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"3n7lm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"boka6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"customElements.define('my-button', MyButton);","type":"unstyled","key":"2qsoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":30,"style":"ITALIC"}],"text":"Теперь вы можете использовать как любой другой HTML-тег:","type":"unstyled","key":"bnllc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"html","type":"unstyled","key":"cdq1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"c957p"},{"data":{"image":{"id":"6671825c9d38727c0f4f49bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1b54c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"2. Использование Shadow DOM","type":"header-three","key":"4d6k5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Shadow DOM помогает изолировать стили и скрипты. Давайте добавим стили в наш компонент:","type":"unstyled","key":"e3m1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"javascript","type":"unstyled","key":"e74d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"class MyButton extends HTMLElement {","type":"unstyled","key":"4qop2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"constructor() {","type":"unstyled","key":"buee1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"super();","type":"unstyled","key":"67p53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"this.attachShadow({ mode: 'open' });","type":"unstyled","key":"8aofa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":"const button = document.createElement('button');","type":"unstyled","key":"4o7lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"}],"text":"button.textContent = 'Click me';","type":"unstyled","key":"dl4cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"ITALIC"}],"text":"const style = document.createElement('style');","type":"unstyled","key":"3gm2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"style.textContent = `","type":"unstyled","key":"926de"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"button {","type":"unstyled","key":"c2928"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"background-color: blue;","type":"unstyled","key":"57cum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"color: white;","type":"unstyled","key":"9gqta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"border: none;","type":"unstyled","key":"4du7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":"padding: 10px 20px;","type":"unstyled","key":"5gsvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"cursor: pointer;","type":"unstyled","key":"6go5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"c6f31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"ITALIC"}],"text":"`;","type":"unstyled","key":"8vfna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"}],"text":"this.shadowRoot.append(style, button);","type":"unstyled","key":"st14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"4op9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"5i5t4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"customElements.define('my-button', MyButton);","type":"unstyled","key":"5rc68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"3. HTML Templates","type":"header-three","key":"4cfs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-шаблоны позволяют заранее определять структуру компонента, которую можно использовать многократно:","type":"unstyled","key":"dngdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"html","type":"unstyled","key":"fq0n8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"1grqp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используем этот шаблон в нашем компоненте:","type":"unstyled","key":"7gg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"javascript","type":"unstyled","key":"1n0k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"class MyButton extends HTMLElement {","type":"unstyled","key":"1ed14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"constructor() {","type":"unstyled","key":"1adv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"super();","type":"unstyled","key":"58t24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"this.attachShadow({ mode: 'open' });","type":"unstyled","key":"ce4j7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"const template = document.getElementById('my-button-template').content;","type":"unstyled","key":"e1e7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"ITALIC"}],"text":"this.shadowRoot.appendChild(template.cloneNode(true));","type":"unstyled","key":"fut77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"2csk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"99shi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"customElements.define('my-button', MyButton);","type":"unstyled","key":"737vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"4. Взаимодействие с другими компонентами","type":"header-three","key":"2ffs1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-компоненты могут взаимодействовать друг с другом через кастомные события. Создадим еще один компонент, который будет реагировать на нажатие кнопки:","type":"unstyled","key":"99hk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"javascript","type":"unstyled","key":"2vh45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"class MyButton extends HTMLElement {","type":"unstyled","key":"a2us0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"constructor() {","type":"unstyled","key":"brvak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"super();","type":"unstyled","key":"7ugel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"this.attachShadow({ mode: 'open' });","type":"unstyled","key":"9uo3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"const template = document.getElementById('my-button-template').content;","type":"unstyled","key":"al27u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"ITALIC"}],"text":"this.shadowRoot.appendChild(template.cloneNode(true));","type":"unstyled","key":"6cpg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":73,"offset":0,"style":"ITALIC"}],"text":"this.shadowRoot.querySelector('button').addEventListener('click', () => {","type":"unstyled","key":"92jfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":90,"offset":0,"style":"ITALIC"}],"text":"this.dispatchEvent(new CustomEvent('my-button-click', { bubbles: true, composed: true }));","type":"unstyled","key":"cn4he"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"});","type":"unstyled","key":"stis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"5guqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"es7u3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"customElements.define('my-button', MyButton);","type":"unstyled","key":"n7mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"ITALIC"}],"text":"class ButtonHandler extends HTMLElement {","type":"unstyled","key":"a4f3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"constructor() {","type":"unstyled","key":"ddof4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"super();","type":"unstyled","key":"adsav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"this.attachShadow({ mode: 'open' });","type":"unstyled","key":"6q6m8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"ITALIC"}],"text":"const div = document.createElement('div');","type":"unstyled","key":"j4gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"ITALIC"}],"text":"div.textContent = 'Button has not been clicked yet';","type":"unstyled","key":"9ndke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"}],"text":"this.shadowRoot.append(div);","type":"unstyled","key":"5tq0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":"this.addEventListener('my-button-click', () => {","type":"unstyled","key":"43ppl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"div.textContent = 'Button has been clicked!';","type":"unstyled","key":"3mknc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"});","type":"unstyled","key":"f3ffj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"dk80c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"unstyled","key":"en1fp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"ITALIC"}],"text":"customElements.define('button-handler', ButtonHandler);","type":"unstyled","key":"8fih5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь используем оба компонента на странице:","type":"unstyled","key":"afbef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"html","type":"unstyled","key":"280om"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"23m33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"6eghg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"ejhdl"},{"data":{"image":{"id":"667182cbe1e46a55028ab850"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f3f81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-компоненты – это мощный инструмент, который позволяет создавать модульные и повторно используемые компоненты с минимальными усилиями. Они обеспечивают изоляцию стилей и скриптов, что делает их более надежными и предсказуемыми в использовании. Если вы еще не пробовали веб-компоненты, сейчас самое время начать. Надеюсь, этот гайд был полезен и вдохновил вас на использование веб-компонентов в ваших проектах. Удачи в разработке и до новых встреч!","type":"unstyled","key":"8hho5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Sbd2xwNHizjpE4yS8imN"}],"entityMap":{}},"mentions":[]}