diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.md b/8-web-components/2-custom-elements/1-live-timer/solution.md index a9eacc880..0bc670ca1 100644 --- a/8-web-components/2-custom-elements/1-live-timer/solution.md +++ b/8-web-components/2-custom-elements/1-live-timer/solution.md @@ -1,4 +1,4 @@ -Please note: -1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it. -2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties. +Зверніть увагу: +1. Ми очищаємо таймер `setInterval`, коли елемент видаляється з документа. Це важливо, інакше він продовжує працювати, навіть якщо більше не потрібен. І браузер не зможе очистити пам'ять від цього елемента і посилань на нього. +2. Ми можемо отримати доступ до поточної дати через властивість `elem.date`. Усі методи та властивості класу є методами та властивостями елементів. diff --git a/8-web-components/2-custom-elements/1-live-timer/task.md b/8-web-components/2-custom-elements/1-live-timer/task.md index 1feb7490a..173f34857 100644 --- a/8-web-components/2-custom-elements/1-live-timer/task.md +++ b/8-web-components/2-custom-elements/1-live-timer/task.md @@ -1,14 +1,14 @@ -# Live timer element +# Елемент таймера в режимі реального часу -We already have `` element to show a nicely formatted time. +У нас вже є елемент `` для відображення гарно відформатованого часу. -Create `` element to show the current time: -1. It should use `` internally, not duplicate its functionality. -2. Ticks (updates) every second. -3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter ). +Створіть елемент `` для відображення поточного часу: +1. Він повинен використовувати `` всередині, а не дублювати його функціонал. +2. Оновлюватися щосекунди. +3. Для кожного оновлення має генеруватися користувацька подія з назвою `tick`, з поточною датою у `event.detail` (див. розділ ). -Usage: +Використання: ```html @@ -18,6 +18,6 @@ Usage: ``` -Demo: +Демонстрація: [iframe src="solution" height=40] diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index a84ed1192..b5ded2f80 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -1,81 +1,81 @@ -# Custom elements +# Кастомні елементи -We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. +Ми можемо створювати власні HTML-елементи, описані нашим класом, з власними методами та властивостями, подіями тощо. -Once a custom element is defined, we can use it on par with built-in HTML elements. +Після визначення кастомного елемента ми можемо використовувати його нарівні з вбудованими HTML-елементами. -That's great, as HTML dictionary is rich, but not infinite. There are no ``, ``, ``... Just think of any other tag we might need. +Це чудово, оскільки словник HTML багатий, але не нескінченний. У ньому немає тегів ``, ``, ``... Просто придумайте будь-який інший тег, який нам може знадобитися. -We can define them with a special class, and then use as if they were always a part of HTML. +Ми можемо визначити їх за допомогою спеціального класу, а потім використовувати так, ніби вони завжди були частиною HTML. -There are two kinds of custom elements: +Існує два типи кастомних елементів: -1. **Autonomous custom elements** -- "all-new" elements, extending the abstract `HTMLElement` class. -2. **Customized built-in elements** -- extending built-in elements, like a customized button, based on `HTMLButtonElement` etc. +1. **Автономні кастомні елементи** -- "абсолютно нові" елементи, що розширюють абстрактний клас `HTMLElement`. +2. **Кастомізовані вбудовані елементи** -- розширення вбудованих елементів, наприклад, кастомізованої кнопки, на основі `HTMLButtonElement` тощо. -First we'll cover autonomous elements, and then move to customized built-in ones. +Спочатку ми розглянемо автономні елементи, а потім перейдемо до кастомізованих вбудованих. -To create a custom element, we need to tell the browser several details about it: how to show it, what to do when the element is added or removed to page, etc. +Щоб створити кастомний елемент, нам потрібно вказати браузеру кілька деталей про нього: як його показувати, що робити, коли елемент додається або видаляється зі сторінки тощо. -That's done by making a class with special methods. That's easy, as there are only few methods, and all of them are optional. +Це робиться шляхом створення класу зі спеціальними методами. Це легко, оскільки методів небагато, і всі вони необов'язкові. -Here's a sketch with the full list: +Ось чернетка з повним списком: ```js class MyElement extends HTMLElement { constructor() { super(); - // element created + // елемент створено } connectedCallback() { - // browser calls this method when the element is added to the document - // (can be called many times if an element is repeatedly added/removed) + // браузер викликає цей метод при додаванні елементу в документ + // (може викликатися багато разів, якщо елемент неодноразово додається/видаляється) } disconnectedCallback() { - // browser calls this method when the element is removed from the document - // (can be called many times if an element is repeatedly added/removed) + // браузер викликає цей метод при видаленні елементу з документу + // (може викликатися багато разів, якщо елемент неодноразово додається/видаляється) } static get observedAttributes() { - return [/* array of attribute names to monitor for changes */]; + return [/* масив імен атрибутів для моніторингу змін */]; } attributeChangedCallback(name, oldValue, newValue) { - // called when one of attributes listed above is modified + // викликається при зміні одного з перерахованих вище атрибутів } adoptedCallback() { - // called when the element is moved to a new document - // (happens in document.adoptNode, very rarely used) + // викликається, коли елемент переміщується в новий документ + // (відбувається в document.adoptNode, дуже рідко використовується) } - // there can be other element methods and properties + // тут можуть бути інші методи та властивості елемента } ``` -After that, we need to register the element: +Після цього нам потрібно зареєструвати елемент: ```js -// let the browser know that is served by our new class +// повідомляємо браузеру, що обслуговується нашим новим класом customElements.define("my-element", MyElement); ``` -Now for any HTML elements with tag ``, an instance of `MyElement` is created, and the aforementioned methods are called. We also can `document.createElement('my-element')` in JavaScript. +Тепер для будь-якого HTML-елемента з тегом `` створюється екземпляр `MyElement` і викликаються вищезгадані методи. Ми також можемо викликати `document.createElement('my-element')` в JavaScript. -```smart header="Custom element name must contain a hyphen `-`" -Custom element name must have a hyphen `-`, e.g. `my-element` and `super-button` are valid names, but `myelement` is not. +```smart header="Ім'я кастомного елемента повинно містити дефіс `-`" +Ім'я кастомного елемента повинно містити дефіс `-`, наприклад, `my-element` і `super-button` є допустимими іменами, а `myelement` -- ні. -That's to ensure that there are no name conflicts between built-in and custom HTML elements. +Це робиться для того, щоб уникнути конфліктів імен між вбудованими та кастомними HTML-елементами. ``` -## Example: "time-formatted" +## Приклад: "time-formatted" -For example, there already exists `