Веб-компоненты Нативные компоненты Тенденции

внешний интерфейс Element HTML Web Components

Сегодня, когда популярна разработка фронтенд-компонентов, разные фреймворки просто завораживают, одна и та же компания, разные команды могут использовать разные фреймворки. Затем, с точки зрения унифицированного видения, взаимодействия и функции, может потребоваться разработка разных платформ с разными платформами, но когда функции и взаимодействия меняются, их все необходимо разрабатывать синхронно. Это потребление человеческих и материальных ресурсов, а ремонтопригодность не очень хорошая, поэтому есть ли компонент, совместимый со всеми фреймворками и простой в разработке и обслуживании? ТакWeb ComponentsЭто может быть ответ, который вам нужен.

Веб-компоненты — это собственная технология, позволяющая создавать многократно используемые настраиваемые элементы.

концепция

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

  • Пользовательские элементы
  • Тень ДОМ
  • HTML-шаблоны
  • Импорт HTML
  1. Пользовательские элементы Набор API-интерфейсов javascript, которые позволяют вам определять пользовательские элементы и их поведение.
customElements.define('jason-custom',
  class extends HTMLElement {
    constructor() {
      super()

      let jasonTestElem = document.createElement('div');
      jasonTestElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(jasonTestElem)
  }
})

Используйте объект CustomElementRegistry для создания пользовательских элементов, что позволяет зарегистрировать пользовательский элемент.

customElements.define()Принимает три параметра:

  • DOMString создает имя элемента (custom elementИмя должно содержать дефис);
  • объект класса поведение класса;
  • Объект, содержащий свойство extends, необязательный параметр, указывающий, от какого встроенного элемента наследуется созданный элемент.

Есть два пользовательских элемента:

  • Автономные пользовательские элементы Это независимый элемент, он не наследует какой-либо элемент HTML, вы можете использовать его прямо на странице, например<jason-elm></jason-elm>, илиdocument.createElement('jason-elm')
  • Настраиваемые встроенные элементы наследуют базовые элементы HTML. При создании необходимо наследовать от базового элемента HTML. При использовании необходимо передать базовый элемент.isАтрибут указывает имя. Например<p is='jason-elm'></p>, илиdocument.createElement('p', { is: 'jason-elm'})

пример:

Autonomous custom elements

class JasonCustom extends HTMLElement {
    constructor() {
        super()
        
        let divElem = document.createElement('div')
        divElem.textContent = 'This is a test Autonomous custom element'
        
        let shadowRoot = this.attachShadow({mode: 'open'})
        shadowRoot.appendChild(divElem)
    }
}
customElements.define('jason-custom', JasonCustom)

Затем мы можем использовать его на странице<jason-custom />

Customized built-in elements

class JasonCustom extends HTMLUListElement {
    construtor() {
        super()
        //
    }
}

customElements.define('jason-custom', JasonCustom, { extends: 'ul' })

Чтобы использовать этот пользовательский элемент на странице, используйте<ul is='jason-custom' />

Функция обратного вызова жизненного цикла пользовательского компонента

  • connectedCallback: вызывается, когда пользовательский элемент впервые вставляется в DOM документа.
  • disabledCallback: вызывается, когда пользовательский элемент удаляется из DOM документа.
  • acceptCallback: вызывается, когда пользовательский элемент перемещается в новый документ.
  • attributeChangedCallback: вызывается, когда настраиваемый элемент добавляет, удаляет или изменяет свои собственные атрибуты.

Пример использования функции обратного вызова цикла объявления можно увидеть в Интернете.life-cycle-callbacks

Shadow DOM

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

Shadow DOM позволяет добавить скрытый DOM в обычное дерево DOM

Shadow DOM

Shadow DOM имеет несколько концепций

  • Теневой хост: обычный узел DOM, к которому будет добавлен теневой DOM.
  • Теневое дерево: дерево DOM внутри Shadow DOM.
  • Граница теней: где заканчивается теневой DOM и где начинается обычный DOM.
  • Корень тени: корневой узел дерева теней.

Вы можете манипулировать элементами Shadow DOM так же, как и базовыми элементами DOM, а также можете добавлять в Shadow DOM<style>И влияет только на элементы в Shadow DOM. Стандарт Shadow DOM означает, что вы можете поддерживать набор Shadow DOM для своих элементов.

Применение

можно использоватьElement.attachShadow()Чтобы добавить Shadow DOM к любому элементу, attachShadow принимает объект в качестве параметра, а параметр имеет атрибутmode, с двумя необязательными значениямиopen close.

let shadowOpen = Elementp.attachShadow({'mode': open})
let shadowClose = Elementp.attachShadow({'mode': close})

openShadow DOM можно получить через javascript, например

let shadowDom = Elementp.shadowRoot

closeЕсли да, то это означает, что теневой Дом нельзя получить извне.shadowRootвернусьnull

Более конкретные статьи см.Open vs. Closed Shadow DOM(Может потребоваться научный доступ в Интернет)

templates slot

Да, все верно, функция шаблонов теперь предусмотрена нативно! ! Этот тип шаблона не будет отображаться браузером, но может быть вызван с помощью javascript!

официальный пример

<template id="my-paragraph">
  <p>My paragraph</p>
</template>

как это использовать

let template = document.getElementById('my-paragraph');
let templateContent = template.content;
document.body.appendChild(templateContent);

Вы можете использовать слот для повышения гибкости шаблона, роль слота заключается в предоставлении заполнителя

Слот использует атрибут name в качестве идентификатора, и вы можете определить произвольные фрагменты html в tempalte в качестве заполнителей, когда объект шаблона используется в html-скрипте. Например:

// tamplate
<p><slot name="my-text">My default text</slot></p>

// 使用时
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

//生成的html
<p><span>Let's have some different text!</span></p>

Конечно, все приведенные выше коды относятся к эпохе фермерства, поэтому платформа, которая позволяет нам разрабатывать компоненты веб-компонентов с эффективностью Индустрии 2.0, имеет технологию Google.polymer, собственный ionicstencil.

Хотя этот стандарт существует уже давно, на самом деле в нем участвовало не так много разработчиков. Это может быть связано с совместимостью этой вещи.

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

Stay Hungry. Stay Foolish

Категории