From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- files/ru/web/web_components/index.html | 6 +++--- .../web_components/using_custom_elements/index.html | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) (limited to 'files/ru/web/web_components') diff --git a/files/ru/web/web_components/index.html b/files/ru/web/web_components/index.html index e8ec0144cc..647bde94bd 100644 --- a/files/ru/web/web_components/index.html +++ b/files/ru/web/web_components/index.html @@ -16,14 +16,14 @@ translation_of: Web/Web_Components

Базовый подход к реализации веб-компонента обычно выглядит примерно так:

  1. Создайте класс, в котором вы указываете функциональность своего веб-компонента, используя синтаксис классов ECMAScript 2015 (дополнительную информацию см. в разделе Классы).
    2. -
  2. Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определен, класс или функцию, в которых указана его функцианальность, и, необязательно, от какого элемента он наследуется.
    3. +
  3. Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определен, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.
  4. При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода {{domxref("Element.attachShadow()")}}. Добавьте дочерние элементы, прослушиватели событий и т.д. в теневой DOM, используя обычные методы DOM.
  5. При необходимости определите HTML template, используя {{htmlelement("template")}} и {{htmlelement("slot")}}. Снова используйте обычные методы DOM, чтобы клонировать шаблон и прикрепить его к вашей теневой DOM.
  6. Используйте свой настраиваемый элемент везде, где хотите, на своей странице, как и любой обычный элемент HTML.
    7. @@ -107,7 +107,7 @@ translation_of: Web/Web_Components
    Расширения интерфейса Event, относящиеся к теневой модели DOM:
    • {{domxref("Event.composed")}}: возвращает {{jsxref("Boolean")}}, который указывает, будет ли событие распространяться через границу теневой DOM в стандартную DOM (true) или нет (false).
      • -
    • {{domxref ("Event.composedPath")}}: возвращает путь к событию (объекты, для которых будут вызваны слушатели). Это не включает узлы в теневых деревьях, если теневой кореневой узел был создан с закрытым {{domxref("ShadowRoot.mode")}}.
      • +
    • {{domxref ("Event.composedPath")}}: возвращает путь к событию (объекты, для которых будут вызваны слушатели). Это не включает узлы в теневых деревьях, если теневой корневой узел был создан с закрытым {{domxref("ShadowRoot.mode")}}.
    diff --git a/files/ru/web/web_components/using_custom_elements/index.html b/files/ru/web/web_components/using_custom_elements/index.html index 01e37bc957..dbdd9897b7 100644 --- a/files/ru/web/web_components/using_custom_elements/index.html +++ b/files/ru/web/web_components/using_custom_elements/index.html @@ -6,7 +6,7 @@ original_slug: Web/Web_Components/Использование_пользоват ---
    {{DefaultAPISidebar("Web Components")}}
    -

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

    +

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

    Заметка: Пользовательские элементы поддерживаются по умолчанию в Firefox, Chrome и Opera. Safari пока поддерживает только автономные пользовательские компоненты, Edge также работает над реализацией.

    @@ -43,14 +43,14 @@ original_slug: Web/Web_Components/Использование_пользоват } } -

    Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определенные моменты жизненного цикла элемента. Например, connectedCallback будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а attributeChangedCallback вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то аттрибут.

    +

    Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определенные моменты жизненного цикла элемента. Например, connectedCallback будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а attributeChangedCallback вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.

    Подробнее об этом в секции {{anch("Using the lifecycle callbacks")}} ниже.

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

      -
    • Автономные пользователькие элементы независимы — они не наследуют встроенным HTML-элементам. Их используют на странице просто как обычный HTML-элемент. Например, <popup-info> или document.createElement("popup-info").
      • +
    • Автономные пользовательские элементы независимы — они не наследуют встроенным HTML-элементам. Их используют на странице просто как обычный HTML-элемент. Например, <popup-info> или document.createElement("popup-info").
    • Модифицированные встроенные элементы наследуют базовым HTML-элементам. Чтобы создать один из них, вы определяете элемент, от которого они унаследованы (как в примерах выше), и используете их как обычный базовый элемент, но с добавлением атрибута/свойства с именем пользовательского элемента {{htmlattrxref("is")}}. Например <p is="word-count">, или document.createElement("p", { is: "word-count" }).
    @@ -130,12 +130,12 @@ wrapper.appendChild(info); на обороте вашей карты.">
    -

    Замечение: Вы можете прочитать полный исходный код на JavaScript здесь.

    +

    Замещение: Вы можете прочитать полный исходный код на JavaScript здесь.

    Модифицированные встроенные элементы

    -

    Тепреь давайте взглянем на другой пример модифицированного пользовательского элемента — раскрывающийся список (см. действующий пример). Он превращает любой ненумерованный список в раскрывающееся/складывающееся меню.

    +

    Теперь давайте взглянем на другой пример модифицированного пользовательского элемента — раскрывающийся список (см. действующий пример). Он превращает любой ненумерованный список в раскрывающееся/складывающееся меню.

    Первым делом определим класс элемента наподобие того, как это делалось выше:

    @@ -150,7 +150,7 @@ wrapper.appendChild(info); } } -

    Здесь мы не будем во всех подробностях описывать функциональность элемента, вы можете понять как он работает, посмотрев исходный код. Единственное принципиальное различие с предыдующим примером состоит в том, что мы используем интерфейс {{domxref("HTMLUListElement")}}, а не {{domxref("HTMLElement")}}. Так что у него есть все характеристики элемента {{htmlelement("ul")}}, плюс дополнительная функциональность, которую определили мы. Это и отличает модифицированный встроенный элемент от автономного пользовательского элемента.

    +

    Здесь мы не будем во всех подробностях описывать функциональность элемента, вы можете понять как он работает, посмотрев исходный код. Единственное принципиальное различие с предыдущим примером состоит в том, что мы используем интерфейс {{domxref("HTMLUListElement")}}, а не {{domxref("HTMLElement")}}. Так что у него есть все характеристики элемента {{htmlelement("ul")}}, плюс дополнительная функциональность, которую определили мы. Это и отличает модифицированный встроенный элемент от автономного пользовательского элемента.

    Далее мы регистрируем этот элемент с помощью метода define() как в прошлом примере, только на сей раз мы добавляем объект options, который определяет, какому встроенному элементу наследует данный:

    @@ -209,7 +209,7 @@ shadow.appendChild(div); } } -

    Сами изменения стилей обрабатываются колбэками жизненного цикла, находящимися внутри конструктора. connectedCallback() срабатывает, когда элемент встраивается в DOM — здесь мы запускаем функцию updateStyle() которая обсеспечивает, чтобы квадрат имел стиль, описанный в его атрибутах:

    +

    Сами изменения стилей обрабатываются колбэками жизненного цикла, находящимися внутри конструктора. connectedCallback() срабатывает, когда элемент встраивается в DOM — здесь мы запускаем функцию updateStyle() которая обеспечивает, чтобы квадрат имел стиль, описанный в его атрибутах:

    connectedCallback() {
   console.log('Пользовательский элемент квадрат добавлен на страницу.');
@@ -226,7 +226,7 @@ adoptedCallback() {
   console.log('Пользовательский элемент квадарат перемещен на другую страницу.');
 }
    -

    Колбэк attributeChangedCallback() запускается когда один из аттрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные аттрибуты, глядя на их имена, и новые и старые значения аттрибутов. В данном случае, однако, мы просто снова запускаем функцию updateStyle() чтобы убедиться, что атрибуты квадрата получили новые значения:

    +

    Колбэк attributeChangedCallback() запускается когда один из атрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные атрибуты, глядя на их имена, и новые и старые значения атрибутов. В данном случае, однако, мы просто снова запускаем функцию updateStyle() чтобы убедиться, что атрибуты квадрата получили новые значения:

    attributeChangedCallback(name, oldValue, newValue) {
   console.log('Атрибуты пользовательского элемента квадрат изменились.');
@@ -240,5 +240,5 @@ adoptedCallback() {
 
    В нашем случае он расположен в начале конструктора.
    
 
 
    
-
    Замечение: Смотрите полный исходный код на JavaScript здесь.
    
+
    Замещение: Смотрите полный исходный код на JavaScript здесь.
    
 
    
-- 
cgit v1.2.3-54-g00ecf