Призначені для користувача елементи custom elements
Платформа «веб-компоненти» включає в себе кілька стандартів Web Components. які знаходяться в розробці.
Почнемо ми з стандарту Custom Elements. який дозволяє створювати свої типи елементів.
Однак, за замовчуванням елемент з нестандартним назвою (наприклад
Стандарт Custom Elements дозволяє описувати для нових елементів свої властивості, методи, оголошувати свій DOM, подобу конструктора і багато іншого.
Давайте подивимося це на прикладах.
Для прикладів рекомендується Chrome
Так як специфікація не остаточна, то для запуску прикладів рекомендується використовувати Google Chrome, краще - останню збірку Chrome Canary. в якій, як правило, відображені останні зміни.
Для опису нового елемента використовується виклик document.registerElement (ім'я,
- ім'я - ім'я нового тега, наприклад "mega-select". Він повинен містити дефіс "-". Специфікація вимагає дефіс, щоб уникнути в майбутньому конфліктів зі стандартними елементами HTML. Не можна створити елемент timer або myTimer - буде помилка.
- прототип - об'єкт-прототип для нового елемента, він повинен наслідувати від HTMLElement. щоб у елемента були стандартні властивості і методи.
Ось, наприклад, новий елемент
Для цього в браузері передбачений спеціальний режим «оновлення» існуючих елементів.
Якщо браузер бачить елемент з невідомим ім'ям, в якому є дефіс - (такі елементи називаються «unresolved»), то:
- Він ставить такого елементу спеціальний CSS-псевдоклас: unresolved. для того, щоб через CSS можна було показати, що він ще «Не довантажити».
- При виклику registerElement такі елементи автоматично оновляться до потрібного класу.
У прикладі нижче реєстрація елемента відбувається через 2 секунди після його появи в розмітці:
При створенні нового елемента в JS, якщо використовується extends. необхідно вказати і вихідний тег в тому числі:
У прототипі свого елемента ми можемо поставити спеціальні методи, які будуть викликатися при створенні, додаванні і видаленні елемента з DOM: