Привет! Посмотрите на последние несколько лет, развитие веб-интерфейса происходит очень быстро!

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

С ростом спроса структура HTML становилась все более и более сложной, а большое количество повторяющихся кодов крайне затрудняло изменение страницы, что также породило множество шаблонных инструментов для извлечения общих частей и превращения их в общие компоненты. Позже, с повышением производительности JavaScript, статус JavaScript становится все выше и выше, и это уже не просто гарнир.Появление внешнего рендеринга снижает нагрузку на сервер по парсингу шаблонов.Серверу нужны только для предоставления статических файлов и интерфейсов API. Затем инструмент внешнего рендеринга был перемещен обратно на сервер, и появился внутренний рендеринг (черный знак вопроса???)

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

Итак, вы слышали о нативных компонентах HTML?

Четыре стандарта веб-компонентов

Прежде чем говорить о нативных компонентах HTML, давайте кратко представим четыре основных стандарта веб-компонентов: шаблон HTML, теневой DOM, пользовательские элементы и импорт HTML. На самом деле один из них был заброшен, поэтому он становится «Большой тройкой».

HTML-шаблон Я думаю, многие слышали о нем, проще говоря, он в HTML5.<template>Ярлык, в нормальных условиях он бесцветный и без запаха, и его существование не воспринимается.Даже img под ним не скачается, и скрипт не выполнится.<template>Как и его название, это просто шаблон, который имеет смысл только тогда, когда вы его используете.

Shadow DOM — это основной инструмент для инкапсуляции собственных компонентов, который может обеспечить независимость между компонентами.

Custom Elements — это контейнер для обертывания нативных компонентов, с ним вам нужно только написать тег, чтобы получить готовый компонент.

Импорт HTML чем-то похож на модуль ES6 в HTML.Вы можете напрямую импортировать другой html-файл, а затем использовать в нем узлы DOM. Однако, поскольку импорт HTML так похож на модуль ES6, и ни один браузер, кроме Chrome, не хочет его реализовывать, он устарел и устарел. В дальнейшем для его замены будет использоваться Модуль ES6, но похоже решения по замене нет, в новой версии Хрома эта функция убрана, и при ее использовании в Консоли будет выдаваться предупреждение. В предупреждении говорится, что вместо этого следует использовать ES-модули, но я проверил, что в Chrome 71 ES-модуль заставит тип MIME обнаруженного файла быть типом JavaScript, который пока не должен поддерживаться.

Shadow DOM

Чтобы говорить о нативных компонентах HTML, мы должны сначала поговорить о том, что такое Shadow DOM.

Все знакомы с моделью DOM, она существует как самый простой каркас в HTML, представляет собой древовидную структуру, и каждый узел в дереве является частью HTML. Как дерево, DOM имеет иерархическую связь между верхними и нижними уровнями.Мы обычно используем для описания «родительский узел», «дочерний узел», «братский узел» и т. д. (конечно, некоторые люди думают, что эти названия подчеркивают пол, поэтому они также создают гендерно-нейтральное наименование). Дочерние узлы в определенной степени наследуют некоторые вещи от родительского узла, а также будут иметь определенное влияние из-за родственных узлов.Более очевидно, что при применении стиля CSS дочерние узлы наследуют некоторые стили от родительского узла. узел.

А Shadow DOM — это тоже своего рода DOM, так что это тоже дерево, но это особая фиолетовая картошка, растущая на дереве DOM🍠, ах нет, поддерево.

Какие? Разве сам DOM не состоит из поддеревьев? Есть ли что-то особенное в этом Shadow DOM?

Особенностью Shadow DOM является то, что он стремится создать относительно независимое пространство. Хотя он также растет на дереве DOM, его среда изолирована от внешнего мира. Конечно, эта изоляция относительна. В этом изолированном пространстве вы может дополнительно наследовать некоторые свойства от родительского узла в дереве DOM или даже наследовать дерево DOM.

Используя изоляцию Shadow DOM, мы можем создавать нативные HTML-компоненты.

На самом деле, браузеры реализовали некоторые компоненты через Shadow DOM, но мы использовали их, не осознавая этого.В этом тоже прелесть компонентов, инкапсулированных Shadow DOM: вы просто пишете HTML-тег, а остальное предоставляете мне. (Это немного похоже на JSX React?)

Давайте посмотрим на пример того, что браузер реализует с помощью Shadow DOM, тега видео:

<video controls src="./video.mp4" width="400" height="300"></video>

Давайте посмотрим на результат рендеринга браузера:

Подождите минутку! Вы имеете в виду Shadow DOM? Чем это отличается от обычного DOM? ? ?

В Chrome Elements по умолчанию не отображает внутренне реализованный узел Shadow DOM, который необходимо включить в настройках:

Примечание. По умолчанию браузер скрывает собственную реализацию Shadow DOM, но если Shadow DOM создается пользователем с помощью скрипта, он не будет скрыт.

Затем мы можем увидеть истинное лицо тега видео:

Здесь вы можете настроить содержимое Shadow DOM по своему желанию, например, отлаживая обычный DOM (в любом случае, как и обычный DOM, он будет восстановлен после обновления).

Мы можем видеть, что большинство узлов в теневой DOM выше имеютpseudoсвойство, в соответствии с этим свойством вы можете писать стили CSS снаружи, чтобы управлять соответствующими стилями узла. Например, приведенный вышеpseudo="-webkit-media-controls-overlay-play-button"Измените цвет фона кнопки ввода на оранжевый:

video::-webkit-media-controls-overlay-play-button {
  background-color: orange;
}

Поскольку Shadow DOM на самом деле является типом DOM, Shadow DOM может продолжать быть вложенным в Shadow DOM, как и выше.

В браузере по-прежнему много элементов, инкапсулированных в форме Shadow DOM, например<input>,<select>,<audio>Подождите, я не буду показывать их здесь по одному.

Из-за изоляции Shadow DOM, даже если вы пишете стиль снаружи:div { background-color: red !important; }, div внутри Shadow DOM никак не пострадает.

То есть при написании стилей используйте идентификатор, когда вы должны использовать идентификатор, и используйте класс, когда вам нужно использовать класс.Класс кнопки должен быть записан как.buttonпросто пиши.button. Вам не нужно учитывать, что id и класс в текущем компоненте могут конфликтовать с другими компонентами, вам просто нужно убедиться, что внутри компонента нет конфликта — это легко сделать.

Это решает проблему, с которой сейчас сталкивается большинство фреймворков компонентизации: как написать класс (имя класса) элемента? Пространства имен с префиксом могут привести к слишком длинным именам классов, например:.header-nav-list-sublist-button-icon; а с помощью некоторых инструментов CSS-in-JS можно создать несколько уникальных имен классов, например:.Nav__welcomeWrapper___lKXTg, такое имя все еще немного длинное и несет избыточную информацию.

ShadowRoot

ShadowRoot — это корень ниже Shadow DOM, вы можете думать о нем как о корне в DOM.<body>выглядят одинаково, но это не так<body>, поэтому вы не можете использовать<body>некоторые свойства на нем, даже если это не узел.

Вы можете пройти ShadowRoot нижеappendChild,querySelectorAllсвойства или методы, такие как управление всем деревом Shadow DOM.

Для обычного элемента, например<div>, вы можете вызвать его выше, позвонивattachShadowметод для создания ShadowRoot (иcreateShadowRootметод, который устарел и устарел),attachShadowПринять объект для инициализации:{ mode: 'open' }, этот объект имеетmodeсвойство, имеющее два значения:'open'и'closed', это свойство необходимо инициализировать при создании ShadowRoot, и оно становится доступным только для чтения свойством после создания ShadowRoot.

mode: 'open'иmode: 'closed'какие отличия есть? вызовattachShadowПосле создания ShadowRootattachShdowМетод вернет экземпляр объекта ShadowRoot, и вы можете использовать это возвращаемое значение для построения всего Shadow DOM. когда режим'open', во внешнем нормальном узле, используемом для создания ShadowRoot (например,<div>), там будетshadowRootатрибут, этот атрибут также является созданным ShadowRoot, то есть после того, как ShadowRoot создан, вы все еще можете получить ShadowRoot через этот атрибут в любом месте и продолжить его преобразование; и когда режим'closed', вы больше не получите это свойство, оно будет установлено наnull, то есть можно толькоattachShadowПосле этого вы получаете объект ShadowRoot, который используется для построения всего Shadow DOM.После того как вы потеряете ссылку на этот объект, вы больше не сможете изменять Shadow DOM.

Как видно из скриншота Shadow DOM выше#shadow-root (user-agent), это объект ShadowRoot, а скобкиuser-agentУказывает, что это Shadow DOM, реализованный внутри браузера.Если используется ShadowRoot, созданный скриптом, круглые скобки будут отображаться какopenилиclosedПредставляет режим Shadow DOM.

реализован внутри браузераuser-agentРежимclosed, поэтому вы не можете получить его объект ShadowRoot через свойство узла ShadowRoot, что означает, что вы не можете изменить Shadow DOM, реализованный внутри этих браузеров, с помощью скриптов.

HTML Template

С помощью объекта ShadowRoot мы можем создать внутреннюю структуру с помощью кода.Для простых структур, возможно, мы можем напрямую передатьdocument.createElementсоздать, но чуть более сложную структуру, если все они созданы таким образом, то это не только громоздко, но и читабельность кода очень плохая. Конечно, также можно передавать строки с обратной галочкой, предоставляемые ES6 (const template = `......`;) с innerHTML для построения структуры, используя строку обратной кавычки для разрыва любой строки, а HTML не чувствителен к отступам для реализации шаблона, но это не элегантно, в конце концов, большая строка HTML в коде не красива, даже если вы извлекаете файл констант отдельно.

В это время вы можете пригласить HTML-шаблон появиться. Мы можем написать структуру DOM в html-документе и загрузить его в ShadowRoot.

Шаблон HTML на самом деле является<template>Тег, при нормальных обстоятельствах содержимое под этим тегом не будет отображаться, в том числе img, стиль, скрипт и т. д. под этим тегом не будут загружены или выполнены. вы можете использовать в сценарииgetElementByIdтакие методы, как<template>Узел, соответствующий метке, но не может напрямую обращаться к своим внутренним узлам, потому что по умолчанию они являются просто шаблонами, которые отображаются в браузере как#document-fragment, что буквально означает «фрагмент документа», можно получить через объект node.contentдля доступа к этому объекту фрагмента документа.

Через объект document-fragment вы можете получить доступ к узлам внутри шаблона, черезdocument.importNodeметод, вы можете создать копию объекта фрагмента документа, затем вы можете использовать все методы свойств DOM, чтобы заменить содержимое шаблона в копии, и, наконец, вставить его в DOM или Shadow DOM.

<div id="div"></div>
<template id="temp">
  <div id="title"></div>
</template>

const template = document.getElementById('temp');
const copy = document.importNode(template.content, true);
copy.getElementById('title').innerHTML = 'Hello World!';

const div = document.getElementById('div');
const shadowRoot = div.attachShadow({ mode: 'closed' });
shadowRoot.appendChild(copy);

HTML Imports

С помощью шаблона HTML мы можем легко создавать закрытые веб-компоненты, но все еще есть некоторые недостатки: мы должны определить большое количество<template>, каждый компонент должен определять<template>.

На этом этапе мы можем использовать устаревший импорт HTML. Хотя от него отказались, в будущем он будет поддерживаться в виде модулей ES6, поэтому теоретически это просто другая форма загрузки.

С помощью импорта HTML мы можем импортировать<template>Определяется в других html-документах, а затем импортируется в нужные html-документы (конечно, его также можно импортировать по запросу через скрипты).После импорта мы можем напрямую использовать определенные в нем узлы шаблона.

Устаревший импорт HTML через<link>реализация тега, просто укажитеrel="import"Вот так, вот так:<link rel="import" href="./templates.html">, он может принятьonloadиonerrorсобытие, чтобы указать, что он закончил загрузку. Конечно, вы также можете создавать узлы ссылок с помощью скриптов, а затем указывать rel и href для загрузки по требованию. После успешного импорта на узле появится ссылкаimportАтрибут, этот атрибут хранит дерево DOM, импортированное из импорта, вы можетеquerySelectorд., и черезcloneNodeилиdocument.importNodeМетод используется после создания копии.

В будущем новые HTML-импорты будут предоставляться в виде модулей ES6, к которым можно будет получить прямой доступ в JavaScript.import * as template from './template.html';, вы также можете импортировать по запросу, например:const template = await import('./template.html');. Однако, хотя браузеры уже поддерживают модули ES6, при импорте других модулей он будет проверять, что MIME-тип файла, возвращаемого сервером, должен быть MIME-типом JavaScript, в противном случае загрузка будет запрещена.

Custom Elements

С вышеупомянутыми тремя стандартами компонентов мы на самом деле просто разделяем HTML, разделяя большое дерево DOM на маленькое дерево DOM, которое изолировано друг от друга, что не является реальным компонентом.

Чтобы реализовать реальный компонент, нам нужно использовать пользовательские элементы, как и его имя, оно используется для определения собственных компонентов.

Суть Custom Elements на самом деле заключается в использовании наследования объектов в JavaScript для наследования родного HTML.HTMLElementкласс (или определенный собственный класс Element, напримерHTMLButtonElement), а затем самостоятельно написать соответствующие функции жизненного цикла для обработки свойств членов и событий взаимодействия с пользователем.

Теперь это очень похоже на React, где вы можете создать такой компонент:class MyElement extends React.Component { ... }, при использовании собственных пользовательских элементов вам нужно написать:class MyElement extends HTMLElement { ... }.

Для пользовательских элементов не так много функций жизненного цикла, но их достаточно для использования. Здесь я делаю простое сравнение функций жизненного цикла Custom Elements и React:

• constructor(): Конструктор, используемый для инициализации состояния, создания Shadow DOM, прослушивания событий и т. д.

  Соответствует большей части фазы монтирования в React, в том числе:constructor(props),static getDerivedStateFromProps(props, state)иrender().

  В пользовательских элементахconstructor()Конструктор — это то, чем он должен быть: инициализация, похожая на инициализацию React, но не разделяющая его на части, как в React. На этом этапе компоненты только создаются (например,document.createElement()), но еще не вставлен в дерево DOM.

• connectedCallback(): Экземпляр компонента был вставлен в дерево DOM для некоторой инициализации, связанной с презентацией.

  Соответствует последнему жизненному циклу фазы монтирования в React:componentDidMount().

  На этом этапе компонент вставляется в дерево DOM или записывается в html-файл дерева DOM.Этот этап обычно предназначен для выполнения некоторой инициализации, связанной с отображением, такой как загрузка данных, изображений, аудио или видео и подобное, аналогичное, похожее.

• attributeChangedCallback(attrName, oldVal, newVal): изменяется свойство компонента, которое используется для обновления состояния компонента.

  Соответствует этапу обновления в React:static getDerivedStateFromProps(props, state),shouldComponentUpdate(nextProps, nextState),render(),getSnapshotBeforeUpdate(prevProps, prevState)иcomponentDidUpdate(prevProps, prevState, snapshot).

  Этот жизненный цикл запускается, когда свойства компонента (реквизиты в React) изменяются, но не все изменения свойств, такие какclass,styleПодобные изменения свойств обычно не приводят к особым взаимодействиям. Если все изменения свойств запускают этот жизненный цикл, это окажет большее влияние на производительность. Таким образом, Custom Elements требует от разработчиков предоставления списка свойств, и эта функция жизненного цикла запускается только при изменении свойств в списке свойств.

  Этот список свойств передается черезстатический только для чтенияАтрибут для объявления, используйте функцию получения в классе ES6 для реализации, реализуйте только получатель, но не сеттер, получатель возвращает константу, поэтому он доступен только для чтения. нравится:

  class AwesomeElement extends HTMLElement {
    static get observedAttributes() {
      return ['awesome'];
    }
  }
  

• disconnectedCallback(): Компонент удален из дерева DOM для некоторой очистки.

  Соответствует фазе размонтирования в React:componentWillUnmount().

• adoptedCallback(): Экземпляры компонентов перемещаются из одного документа в другой.

  Этот жизненный цикл уникален для нативных компонентов, в React нет аналогичного жизненного цикла. Эта функция жизненного цикла обычно не используется, обычно она возникает при работе с несколькими документами.document.adoptNode()Этот жизненный цикл запускается, когда функция передает документ, которому принадлежит узел.

После определения пользовательского компонента нам нужно зарегистрировать его в списке тегов HTML черезwindow.customElements.define()Функция может быть реализована, эта функция принимает два обязательных параметра и один необязательный параметр. Первый параметр — это зарегистрированное имя тега.Чтобы избежать конфликтов с собственными тегами HTML, Custom Elements требует, чтобы определяемое пользователем имя компонента содержало хотя бы одну короткую черту.-, и не может начинаться с тире, напримерmy-element,awesome-buttonи т.д. возможны. Второй параметр — это класс зарегистрированного компонента. Вы можете напрямую передать унаследованное имя класса подкласса. Конечно, вы также можете напрямую написать анонимный класс:

window.customElements.define('my-element', class extends HTMLElement {
  ...
});

После регистрации мы можем его использовать.Мы можем напрямую прописать соответствующие теги в html документе, такие как:<my-element></my-element>, также черезdocument.createElement('my-element')создавать и использовать почти точно так же, как обычный тег. Но следует отметить, что хотя стандарт html говорит о том, что некоторые теги не могут быть закрытыми или самозакрывающимися (<br>или<br />), но толькоуказано несколько ярлыковДопускается самозакрытие, поэтому при написании узла Custom Elements в html необходимо привести закрывающий тег.

Поскольку пользовательские элементы определяются JavaScript, а общие файлы js определяются<script>Теги являются внешними, поэтому пользовательские элементы в html-документе находятся в состоянии по умолчанию, когда JavaScript не выполняется, и браузер по умолчанию отображает их содержимое напрямую. Чтобы этого не произошло, Пользовательские элементы будут иметь:definedПсевдоклассы CSS отсутствуют до регистрации, поэтому мы можем скрыть их до регистрации пользовательских элементов с помощью селекторов CSS, например:

my-element:not(:defined) {
  display: none;
}

Или Custom Elements также предоставляет функцию для проверки того, зарегистрирован ли уже указанный компонент:customElements.whenDefined(), эта функция принимает параметр имени компонента и возвращает промис, когда промис разрешается, это означает, что компонент зарегистрирован.

Таким образом, мы можем безопасно загрузить JavaScript пользовательских элементов.<script>используется на этикеткеasyncсвойства для ленивой загрузки (конечно, при использовании формы модулей ES6 поведение загрузки по умолчанию будет таким же, какdeferпохожий).

Custom Elements + Shadow DOM

При использовании Custom Elements для создания компонентов он обычно сочетается с Shadow DOM.Используя изоляцию Shadow DOM, вы можете создавать независимые компоненты.

Обычно в пользовательских элементахconstructor()Создайте Shadow DOM в конструкторе, добавьте прослушиватели событий к узлам в Shadow DOM и активируйте собственные объекты Events для определенных событий.

При обычном написании html-документов мы можем добавить некоторые дочерние узлы к пользовательским элементам, например:<my-element><h1>Title</h1><p>Content</p></my-element>, а созданный нами Shadow DOM имеет свою собственную структуру.Как разместить эти дочерние узлы в правильном положении в Shadow DOM?

В React эти дочерние узлы помещаются вpropsизchildren, мы можемrender()выбрать, куда его поставить. А в Shadow DOM есть специальный тег:<slot>, использование этого тега точно так же, как и его буквальное значение, «слот» помещается в Shadow DOM, а затем дочерние узлы пользовательских элементов будут автоматически помещены в этот «слот».

Иногда нам нужно более точно контролировать положение дочерних узлов в Shadow DOM, и по умолчанию все дочерние узлы будут размещены в одном и том же месте.<slot>вкладку, даже если вы пишете несколько<slot>. Как точнее контролировать дочерние узлы?

по умолчанию,<slot>Fallback</slot>Это значение по умолчанию<slot>, только первый по умолчанию<slot>будет работать, поместите в него все дочерние узлы, и если доступных дочерних узлов нет, будет отображаться содержимое Fallback по умолчанию (Fallback может быть дочерним деревом DOM).

<slot>На этикетке естьnameимущество, когда вы предоставляетеname, он станет "именным<slot>",Такой<slot>Их может быть больше одного, если имена разные. В этот момент они будут автоматически соответствовать нижней полосе пользовательских элементов.slotсвойства иslotсобственность и себяnameтот же дочерний узел, например:

<template id="list">
  <div>
    <h1>Others</h1>
    <slot></slot>
  </div>
  <div>
    <h1>Animals</h1>
    <slot name="animal"></slot>
  </div>
  <div>
    <h1>Fruits</h1>
    <slot name="fruit"></slot>
  </div>
</template>

<my-list>
  <div slot="animal">Cat</div>
  <div slot="fruit">Apple</div>
  <div slot="fruit">Banana</div>
  <div slot="other">flower</div>
  <div>pencil</div>
  <div slot="animal">Dog</div>
  <div slot="fruit">peach</div>
  <div>red</div>
</my-list>

class MyList extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('list');
    root.appendChild(document.importNode(template.content, true));
  }
}
customElements.define('my-list', MyList);

Таким образом можно получить структуру, показанную на рисунке,#shadow-root (open)Указывает, что это открытый Shadow DOM, следующие узлы клонируются непосредственно из шаблона, и браузер автоматически выбирает три<slot>Несколько серых размещены под этикеткой<div>узлы, собственно эти серые<div>Узлы представляют собой «ссылки» на свои реальные узлы, и при перемещении по ним указателя мыши отображаетсяrevealссылка, щелкните эту ссылку, чтобы перейти к ее реальному узлу.

Здесь мы видим, что хотя<my-list>Дочерние узлы ниже размещены не по порядку, но пока они даныslotсвойство, оно будет размещено в правильном<slot>под этикеткой. Обратите внимание, что один из<div slot="other">flower</div>, этот узел связан с указаннымslot="other", но совпадений не найдено<slot>label, поэтому он не будет отображаться в результатах.

При стилизации Shadow DOM под Custom Elements мы можем поместить его непосредственно под Shadow DOM.<style>теги, вы также можете разместить<link rel="stylesheet">, стили в Shadow DOM являются локальными, поэтому не беспокойтесь о том, что они повлияют на внешнюю часть Shadow DOM. А поскольку эти стили влияют только на локальные 🌻, производительность также значительно повышается.

В стилях внутри Shadow DOM также есть некоторые специальные селекторы, такие как:hostселектор, представляющий ShadowRoot, аналогичный обычному DOM:root, и его можно комбинировать с другими псевдоклассами, например, когда мышь находится над компонентом::host(:hover), когда компонент имеет класс::host(.awesome), когда компонент имеетdisabledКогда атрибут::host([disabled])……но:hostОн имеет унаследованные свойства, поэтому, если некоторые стили определены вне пользовательских элементов, они будут переопределены.:hostтак что вы можете легко реализовать различные «стили темы».

Для реализации пользовательских тем мы также можем использовать предоставляемый Shadow DOM.:host-context()селектор, этот селектор позволяет проверить, содержит ли какой-либо узел-предок Shadow DOM указанный селектор. Например, если в самом внешнем DOM<html>или<body>Есть класс по:.night, вы можете использовать его в Shadow DOM:host-context(.night)указать ночную тему. Это позволяет наследовать стили темы.

Другой способ определить стиль — использоватьCSS-переменные. Мы используем переменные в Shadow DOM для указания стилей, таких как:background-color: var(--bg-colour, #0F0);, чтобы его можно было указать вне Shadow DOM--bg-colourпеременная для установки стиля, если переменная не указана, будет использоваться цвет стиля по умолчанию#0F0.

Иногда нам нужно использовать полностью настраиваемые стили внутри Shadow DOM, такие как стиль шрифта и размер шрифта.Если мы позволим ему наследовать, это может привести к беспорядку в макете, и немного хлопотно каждый раз указывать стиль вне компонента, и это также разрушает инкапсуляцию компонента. Таким образом, Shadow DOM обеспечиваетallсвойство, просто укажите:host{ all: initial; }Все унаследованные свойства можно сбросить.

Demo

В Интернете уже есть много демонстраций веб-компонентов.Это демонстрация, которую я написал, когда впервые столкнулся с ES6 и веб-компонентами 2 года назад:GitHub.com/Золотая Заря2/…, календарь, который в то время все еще был спецификацией v0, и в Firefox все еще была ошибка, которая приводила к сбою Firefox (это похоже на ошибку в реализации Firefox Shadow DOM). В настоящее время эта демонстрация больше не может работать в Firefox, потому что Firefox удалил спецификацию v0 и начал внедрять стандарт v1, поэтому я могу провести рефакторинг этой демонстрации в ближайшем будущем.

Суммировать

Web ComponentsКонцепция чего-либоAlex RussellсуществуетFronteers Conference 2011Эта концепция была очень шокирующей в то время. В 2013 году Google запустилаPolymer«Структура веб-компонентов для продвижения разработки веб-компонентов.

В 2014 году Chrome выпустил раннюю версию спецификации компонентов веб-компонентов, включая Custom Elements v0, Shadow DOM v0 и импорт HTML. Однако спецификации в настоящее время все еще являются экспериментальными, и теперь они устарели и заменены стандартами Custom Elements v1 и Shadow DOM v1, в то время как импорт HTML не стандартизирован и в будущем будет заменен модулями ES6.

Спецификация v0 будет отмечена предупреждением об устаревании в Chrome 70 и удалена из Chrome 73 примерно в марте 2019 года.

Стандарт v1 уже поддерживается в Chrome 54+ и Safari 10.1+, и его официальная поддержка в Firefox планируется в этом месяце (октябрь 2018 г.) (ранее Firefox поддерживал его, но по умолчанию он отключен, и его необходимоabout:configвключено в).

Шаблоны HTML уже давно принимаются и поддерживаются основными браузерами как функция HTML5.

Поскольку в веб-компонентах задействовано много подпунктов, скриншот «Можно ли использовать» здесь не приводится Читатели могут выполнить поиск «Веб-компоненты», чтобы проверить соответствующую совместимость, иликликните сюда.

Включено в Могу ли я использоватьHTML Templates,HTML Imports,Shadow DOM v0,Custom Elements v0,Shadow DOM v1иCustom Elements v1Соответствующая совместимость браузера и примечания очень подробны.

Веб-компоненты, на которых основаны собственные HTML-компоненты, не являются единой технологией. Они состоят из ряда стандартов браузера, определенных W3C. Компоненты построены таким образом, чтобы браузер мог их понять, что станет будущим интерфейсом. стандарт.

---

Текст / jinliming2

Соленая рыба, полная любопытства к новым вещам

Монтаж/Флуоресценция

Предыдущие статьи автора:

• Потихоньку поднимаем тайну WebAssembly
• Опасная цель="_blank" и "открывалка"

Автор разрешил опубликовать эту статью, и авторские права принадлежат Chuangyu Frontend. Пожалуйста, укажите источник для перепечатки этой статьи. Ссылка на эту статью:известно Sec-Fed.com/2018-10-05-…

Если вы хотите подписаться на другие сообщения с передовой линии KnownsecFED, выполните поиск и подпишитесь на нашу общедоступную учетную запись WeChat: KnownsecFED. Добро пожаловать, чтобы оставить сообщение для обсуждения, мы ответим как можно скорее.

Спасибо за чтение.