From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../web_components/using_custom_elements/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'files/ru/web/web_components/using_custom_elements/index.html') 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 01d37d7fe9..d387daf26a 100644 --- a/files/ru/web/web_components/using_custom_elements/index.html +++ b/files/ru/web/web_components/using_custom_elements/index.html @@ -43,7 +43,7 @@ original_slug: Web/Web_Components/Использование_пользоват } } -

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

+

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

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

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

Разбор простых примеров

-

А сейчас давайте разберем еще несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.

+

А сейчас давайте разберём ещё несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.

Автономные пользовательские элементы

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

В этом фрагменте кода содержится определение конструктора {{jsxref("Classes.constructor","constructor")}} класса, которое всегда начинается с вызова super() чтобы отработала цепочка прототипного наследования.

-

Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определенную структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.

+

Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определённую структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.

// Создание shadow root
 var shadow = this.attachShadow({mode: 'open'});
@@ -91,7 +91,7 @@ icon.setAttribute('tabindex', 0);
 var info = document.createElement('span');
 info.setAttribute('class','info');
 
-// Берем содержимое атрибута и добавляем его в span
+// Берём содержимое атрибута и добавляем его в span
 var text = this.getAttribute('text');
 info.textContent = text;
 
@@ -106,7 +106,7 @@ var img = document.createElement('img');
 img.src = imgUrl;
 icon.appendChild(img);
 
-// Создаем CSS для shadow dom
+// Создаём CSS для shadow dom
 var style = document.createElement('style');
 
 style.textContent = '.wrapper {' +
@@ -119,7 +119,7 @@ shadow.appendChild(wrapper);
 wrapper.appendChild(icon);
 wrapper.appendChild(info);
-

Наконец, регистрируем пользовательский элемент в CustomElementRegistry с помощью метода define(), который упоминался ранее — в качестве параметров мы передаем ему имя элемента и имя класса, который содержит его функциональность:

+

Наконец, регистрируем пользовательский элемент в CustomElementRegistry с помощью метода define(), который упоминался ранее — в качестве параметров мы передаём ему имя элемента и имя класса, который содержит его функциональность:

customElements.define('popup-info', PopUpInfo);
@@ -164,7 +164,7 @@ wrapper.appendChild(info); </ul> -

Вы задаете элемент <ul> как обычно, но указываете имя модифицированного элемента в атрибуте is.

+

Вы задаёте элемент <ul> как обычно, но указываете имя модифицированного элемента в атрибуте is.

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

@@ -177,7 +177,7 @@ wrapper.appendChild(info); @@ -216,14 +216,14 @@ shadow.appendChild(div); updateStyle(this); } -

колбэки disconnectedCallback() и adoptedCallback() логируют простые сообщения на консоль, которые уведомляют нас, что элемент удален из DOM или перемещен на другую страницу:

+

колбэки disconnectedCallback() и adoptedCallback() логируют простые сообщения на консоль, которые уведомляют нас, что элемент удалён из DOM или перемещён на другую страницу:

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

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

-- cgit v1.2.3-54-g00ecf