diff options
author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/web_components/using_custom_elements/index.html | |
parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/web_components/using_custom_elements/index.html')
-rw-r--r-- | files/ru/web/web_components/using_custom_elements/index.html | 20 |
1 files changed, 10 insertions, 10 deletions
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/Использование_пользоват } }</pre> -<p>Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определенные моменты жизненного цикла элемента. Например, <code>connectedCallback</code> будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а <code>attributeChangedCallback</code> вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.</p> +<p>Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определённые моменты жизненного цикла элемента. Например, <code>connectedCallback</code> будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а <code>attributeChangedCallback</code> вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.</p> <p>Подробнее об этом в секции {{anch("Using the lifecycle callbacks")}} ниже.</p> @@ -56,7 +56,7 @@ original_slug: Web/Web_Components/Использование_пользоват <h2 id="Разбор_простых_примеров">Разбор простых примеров</h2> -<p>А сейчас давайте разберем еще несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.</p> +<p>А сейчас давайте разберём ещё несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.</p> <h3 id="Автономные_пользовательские_элементы">Автономные пользовательские элементы</h3> @@ -77,7 +77,7 @@ original_slug: Web/Web_Components/Использование_пользоват <p>В этом фрагменте кода содержится определение конструктора {{jsxref("Classes.constructor","constructor")}} класса, которое всегда начинается с вызова <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> чтобы отработала цепочка прототипного наследования.</p> -<p>Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определенную структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.</p> +<p>Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определённую структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.</p> <pre class="brush: js">// Создание 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);</pre> -<p>Наконец, регистрируем пользовательский элемент в <code>CustomElementRegistry</code> с помощью метода <code>define()</code>, который упоминался ранее — в качестве параметров мы передаем ему имя элемента и имя класса, который содержит его функциональность:</p> +<p>Наконец, регистрируем пользовательский элемент в <code>CustomElementRegistry</code> с помощью метода <code>define()</code>, который упоминался ранее — в качестве параметров мы передаём ему имя элемента и имя класса, который содержит его функциональность:</p> <pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre> @@ -164,7 +164,7 @@ wrapper.appendChild(info);</pre> </ul></pre> -<p>Вы задаете элемент <code><ul></code> как обычно, но указываете имя модифицированного элемента в атрибуте <code>is</code>.</p> +<p>Вы задаёте элемент <code><ul></code> как обычно, но указываете имя модифицированного элемента в атрибуте <code>is</code>.</p> <div class="note"> <p><strong>Замечание</strong>: Полный <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">исходный код на JavaScript</a> доступен здесь.</p> @@ -177,7 +177,7 @@ wrapper.appendChild(info);</pre> <ul> <li><code>connectedCallback</code>: Срабатывает, когда пользовательский элемент впервые добавляется в DOM.</li> <li><code>disconnectedCallback</code>: Срабатывает, когда пользовательский элемент удаляется из DOM.</li> - <li><code>adoptedCallback</code>: Срабатывает, когда пользовательский элемент перемещен в новый документ.</li> + <li><code>adoptedCallback</code>: Срабатывает, когда пользовательский элемент перемещён в новый документ.</li> <li><code>attributeChangedCallback</code>: Срабатывает, когда пользовательскому элементу добавляют, удаляют или изменяют атрибут.</li> </ul> @@ -216,14 +216,14 @@ shadow.appendChild(div);</pre> updateStyle(this); }</pre> -<p>колбэки <code>disconnectedCallback()</code> и <code>adoptedCallback()</code> логируют простые сообщения на консоль, которые уведомляют нас, что элемент удален из DOM или перемещен на другую страницу:</p> +<p>колбэки <code>disconnectedCallback()</code> и <code>adoptedCallback()</code> логируют простые сообщения на консоль, которые уведомляют нас, что элемент удалён из DOM или перемещён на другую страницу:</p> <pre class="brush: js">disconnectedCallback() { console.log('Пользовательский элемент квадрат удален.'); } adoptedCallback() { - console.log('Пользовательский элемент квадрат перемещен на другую страницу.'); + console.log('Пользовательский элемент квадрат перемещён на другую страницу.'); }</pre> <p>Колбэк <code>attributeChangedCallback()</code> запускается когда один из атрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные атрибуты, глядя на их имена, и новые и старые значения атрибутов. В данном случае, однако, мы просто снова запускаем функцию <code>updateStyle()</code> чтобы убедиться, что атрибуты квадрата получили новые значения:</p> |