diff options
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 | 10 |
1 files changed, 5 insertions, 5 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 3aec974d1a..01e37bc957 100644 --- a/files/ru/web/web_components/using_custom_elements/index.html +++ b/files/ru/web/web_components/using_custom_elements/index.html @@ -172,7 +172,7 @@ wrapper.appendChild(info);</pre> <h2 id="Использование_lifecycle_callbacks">Использование lifecycle callbacks</h2> -<p>Вы можете определить несколько разных коллбеков в конструкторе пользовательских элементов, которые сработают на разных этапах жизненного цикла элемента:</p> +<p>Вы можете определить несколько разных колбэков в конструкторе пользовательских элементов, которые сработают на разных этапах жизненного цикла элемента:</p> <ul> <li><code>connectedCallback</code>: Срабатывает, когда пользовательский элемент впервые добавляется в DOM.</li> @@ -209,14 +209,14 @@ shadow.appendChild(div);</pre> } }</pre> -<p>Сами изменения стилей обрабатываются коллбеками жизненного цикла, находящимися внутри конструктора. <code>connectedCallback()</code> срабатывает, когда элемент встраивается в DOM — здесь мы запускаем функцию <code>updateStyle()</code> которая обсеспечивает, чтобы квадрат имел стиль, описанный в его атрибутах:</p> +<p>Сами изменения стилей обрабатываются колбэками жизненного цикла, находящимися внутри конструктора. <code>connectedCallback()</code> срабатывает, когда элемент встраивается в DOM — здесь мы запускаем функцию <code>updateStyle()</code> которая обсеспечивает, чтобы квадрат имел стиль, описанный в его атрибутах:</p> <pre class="brush: js">connectedCallback() { console.log('Пользовательский элемент квадрат добавлен на страницу.'); 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('Пользователский элемент квадрат удален.'); @@ -226,14 +226,14 @@ adoptedCallback() { console.log('Пользовательский элемент квадарат перемещен на другую страницу.'); }</pre> -<p>Коллбек <code>attributeChangedCallback()</code> запускается когда один из аттрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные аттрибуты, глядя на их имена, и новые и старые значения аттрибутов. В данном случае, однако, мы просто снова запускаем функцию <code>updateStyle()</code> чтобы убедиться, что атрибуты квадрата получили новые значения:</p> +<p>Колбэк <code>attributeChangedCallback()</code> запускается когда один из аттрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные аттрибуты, глядя на их имена, и новые и старые значения аттрибутов. В данном случае, однако, мы просто снова запускаем функцию <code>updateStyle()</code> чтобы убедиться, что атрибуты квадрата получили новые значения:</p> <pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) { console.log('Атрибуты пользовательского элемента квадрат изменились.'); updateStyle(this); }</pre> -<p>Обратите внимание, что нужно наблюдать за атрибутами, чтобы запустить коллбек <code>attributeChangedCallback()</code> когда они изменятся. Это делается через вызов геттера <code>observedAttributes()</code> в конструкторе, который содержит оператор <code>return</code> возвращающий массив с именами атрибутов, которые вы хотите наблюдать:</p> +<p>Обратите внимание, что нужно наблюдать за атрибутами, чтобы запустить колбэк <code>attributeChangedCallback()</code> когда они изменятся. Это делается через вызов геттера <code>observedAttributes()</code> в конструкторе, который содержит оператор <code>return</code> возвращающий массив с именами атрибутов, которые вы хотите наблюдать:</p> <pre class="brush: js">static get observedAttributes() {return ['w', 'l']; }</pre> |