Template element by Lelihelija · Pull Request #346 · javascript-tutorial/uk.javascript.info
| Теоретично, ми могли б створити будь-який невидимий елемент де-небудь у HTML для зберігання у ньому розмітки HTML. Тоді що ж такого особливого у `<template>`? | ||
|
|
||
| First, its content can be any valid HTML, even if it normally requires a proper enclosing tag. | ||
| По-перше, він може містити у собі будь-який коректний HTML, навіть якщо за звичайних умов він би потребував належного закриваючого тега. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| По-перше, він може містити у собі будь-який коректний HTML, навіть якщо за звичайних умов він би потребував належного закриваючого тега. | |
| По-перше, він може містити у собі будь-який коректний HTML, навіть якщо за звичайних умов він би потребував якогось додаткового тега. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| ``` | ||
|
|
||
| The browser considers `<template>` content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>` is not run, etc. | ||
| Браузер розглядає вміст тега `<template>` як такий, який є "за межами документа": до нього не застосовуються стилі, не виконуються скрипти, `<video autoplay>` не запускається і тому подібне. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Браузер розглядає вміст тега `<template>` як такий, який є "за межами документа": до нього не застосовуються стилі, не виконуються скрипти, `<video autoplay>` не запускається і тому подібне. | |
| Браузер розглядає вміст тега `<template>` як такий, який існує "за межами документа": до нього не застосовуються стилі, не виконуються скрипти, `<video autoplay>` не запускається і тому подібне. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| Вміст починає опрацьовуватися (застосовуються стилі, виконуються скрипти і т. ін.), коли ми вставляємо його у документ. | ||
|
|
||
| ## Inserting template | ||
| ## Вставлення шаблону |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ## Вставлення шаблону | |
| ## Вставка шаблону |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| ## Вставлення шаблону | ||
|
|
||
| The template content is available in its `content` property as a [DocumentFragment](info:modifying-document#document-fragment) -- a special type of DOM node. | ||
| Вміст шаблону контенту за зверненням до його властивості `content`, оскільки [DocumentFragment](info:modifying-document#document-fragment) -- це спеціальний тип вузла DOM. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Вміст шаблону контенту за зверненням до його властивості `content`, оскільки [DocumentFragment](info:modifying-document#document-fragment) -- це спеціальний тип вузла DOM. | |
| Вміст template доступний у його властивості `content` як [DocumentFragment](info:modifying-document#document-fragment) -- спеціальний тип вузла DOM. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| Вміст шаблону контенту за зверненням до його властивості `content`, оскільки [DocumentFragment](info:modifying-document#document-fragment) -- це спеціальний тип вузла DOM. | ||
|
|
||
| We can treat it as any other DOM node, except one special property: when we insert it somewhere, its children are inserted instead. | ||
| Ми можемо працювати з ним як зі всіма іншими вузлами DOM, за винятком однієї особливості: використовуючи його будь-де, ми отримуємо вкладені всередину дочірні елементи, а не сам по собі тег. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Ми можемо працювати з ним як зі всіма іншими вузлами DOM, за винятком однієї особливості: використовуючи його будь-де, ми отримуємо вкладені всередину дочірні елементи, а не сам по собі тег. | |
| Ми можемо працювати з ним як зі всіма іншими вузлами DOM, за винятком однієї особливості: коли ми його кудись вставляємо, вставляються його дочірні елементи, а не він сам. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| - Ми можемо доступитися до `template.content` з JavaScript, клонувати його, щоб потім знову використати у новому компоненті. | ||
|
|
||
| The `<template>` tag is quite unique, because: | ||
| Тег `<template>` є досить унікальний, оскільки: |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Тег `<template>` є досить унікальний, оскільки: | |
| Тег `<template>` є унікальниv, оскільки: |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changed to унікальним
done
| - The browser checks HTML syntax inside it (as opposed to using a template string inside a script). | ||
| - ...But still allows use of any top-level HTML tags, even those that don't make sense without proper wrappers (e.g. `<tr>`). | ||
| - The content becomes interactive: scripts run, `<video autoplay>` plays etc, when inserted into the document. | ||
| - Браузер перевіряє HTML синтаксис всередині нього (на противагу використанню шаблону рядка всередині скрипта). |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| - Браузер перевіряє HTML синтаксис всередині нього (на противагу використанню шаблону рядка всередині скрипта). | |
| - Браузер перевіряє HTML синтаксис всередині нього (на відміну від рядка всередині скрипта з тією ж розміткою). |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| - ...But still allows use of any top-level HTML tags, even those that don't make sense without proper wrappers (e.g. `<tr>`). | ||
| - The content becomes interactive: scripts run, `<video autoplay>` plays etc, when inserted into the document. | ||
| - Браузер перевіряє HTML синтаксис всередині нього (на противагу використанню шаблону рядка всередині скрипта). | ||
| - ...Але все одно дозволяє використання будь-якого високорівневого тега HTML, навіть тих, використання яких не має сенсу без відповідного обгортання (напр. `<tr>`). |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| - ...Але все одно дозволяє використання будь-якого високорівневого тега HTML, навіть тих, використання яких не має сенсу без відповідного обгортання (напр. `<tr>`). | |
| - ...Але все одно дозволяє використання будь-якого тега HTML, навіть тих, використання яких не має сенсу без відповідної обгортки (напр. `<tr>`). |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| - The content becomes interactive: scripts run, `<video autoplay>` plays etc, when inserted into the document. | ||
| - Браузер перевіряє HTML синтаксис всередині нього (на противагу використанню шаблону рядка всередині скрипта). | ||
| - ...Але все одно дозволяє використання будь-якого високорівневого тега HTML, навіть тих, використання яких не має сенсу без відповідного обгортання (напр. `<tr>`). | ||
| - Вміст стає інтерактивним: виконуються скрипти, запускається `<video autoplay>` і т. ін., коли він поміщається у документ. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| - Вміст стає інтерактивним: виконуються скрипти, запускається `<video autoplay>` і т. ін., коли він поміщається у документ. | |
| - Вміст стає інтерактивним: виконуються скрипти, запускається `<video autoplay>` і т. ін., коли ми переміщаємо його у документ. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
| - Вміст стає інтерактивним: виконуються скрипти, запускається `<video autoplay>` і т. ін., коли він поміщається у документ. | ||
|
|
||
| The `<template>` element does not feature any iteration mechanisms, data binding or variable substitutions, but we can implement those on top of it. | ||
| Елемент `<template>` не має жодних механізмів ітерації, зв’язування даних чи заміни змінних, але ми можемо їх реалізувати для до нього. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Елемент `<template>` не має жодних механізмів ітерації, зв’язування даних чи заміни змінних, але ми можемо їх реалізувати для до нього. | |
| Елемент `<template>` не має жодних механізмів ітерації, зв’язування даних чи заміни змінних, але ми можемо реалізувати їх поверх нього. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done