aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/web_components/using_custom_elements/index.html
diff options
context:
space:
mode:
authorAlexey Istomin <webistomin@gmail.com>2021-03-20 18:37:44 +0300
committerGitHub <noreply@github.com>2021-03-20 18:37:44 +0300
commit841aae260382e2bf5ebb44d765d8c7301d27caab (patch)
tree81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/web_components/using_custom_elements/index.html
parent730fea852ff827ca034fe17c84288c95d270ec92 (diff)
downloadtranslated-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.html20
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>
&lt;/ul&gt;</pre>
-<p>Вы задаете элемент <code>&lt;ul&gt;</code> как обычно, но указываете имя модифицированного элемента в атрибуте <code>is</code>.</p>
+<p>Вы задаёте элемент <code>&lt;ul&gt;</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>