From 286b23dba3ddde0a39d2a2468f0bc706fa8f66a5 Mon Sep 17 00:00:00 2001
From: Saman Zameni <53289765+samanzameni@users.noreply.github.com>
Date: Mon, 21 Apr 2025 15:50:40 +0330
Subject: [PATCH 1/3] Update article.md

Template element
---
 .../4-template-element/article.md             | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 5499c4edc..5fa9f87ec 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,13 +1,14 @@
 
 # Template element
 
-A built-in `<template>` element serves as a storage for HTML markup templates. The browser ignores its contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.
+عنصر داخلی <template> به‌عنوان یک فضای ذخیره‌سازی برای الگوهای HTML (HTML Markup Templates) عمل می‌کند. مرورگر محتوای درون آن را نادیده می‌گیرد و فقط از نظر صحت نگارشی (Syntax) آن را بررسی می‌کند، اما ما می‌توانیم با استفاده از JavaScript به آن دسترسی پیدا کنیم و از آن برای ایجاد عناصر دیگر استفاده کنیم.
 
-In theory, we could create any invisible element somewhere in HTML for HTML markup storage purposes. What's special about `<template>`?
+از نظر تئوری، ما می‌توانیم هر عنصر نامرئی دیگری را در HTML قرار دهیم تا به‌عنوان فضای ذخیره‌سازی برای کد HTML استفاده شود. پس چه چیزی <template> را خاص می‌کند؟
 
-First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.
+اول اینکه، محتوای آن می‌تواند هر کد HTML معتبری باشد، حتی اگر در حالت معمول نیاز به تگ محصورکننده‌ی مناسب داشته باشد.
+
+برای مثال، ما می‌توانیم یک ردیف جدول <tr> را درون آن قرار دهیم:
 
-For example, we can put there a table row `<tr>`:
 ```html
 <template>
   <tr>
@@ -16,9 +17,9 @@ For example, we can put there a table row `<tr>`:
 </template>
 ```
 
-Usually, if we try to put `<tr>` inside, say, a `<div>`, the browser detects the invalid DOM structure and "fixes" it, adds `<table>` around. That's not what we want. On the other hand, `<template>` keeps exactly what we place there.
+معمولاً اگر سعی کنیم تگ `<tr>` را داخل مثلاً یک `<div>` قرار دهیم، مرورگر ساختار نامعتبر DOM را تشخیص می‌دهد و آن را "اصلاح" می‌کند؛ یعنی به‌طور خودکار یک `<table>` به اطراف آن اضافه می‌کند. اما این چیزی نیست که ما بخواهیم. در عوض، `<template>` دقیقاً همان چیزی را که درونش قرار می‌دهیم، بدون تغییر نگه می‌دارد.
 
-We can put styles and scripts into `<template>` as well:
+ما حتی می‌توانیم استایل‌ها و اسکریپت‌ها را نیز داخل `<template>` قرار دهیم:
 
 ```html
 <template>
@@ -30,18 +31,17 @@ We can put styles and scripts into `<template>` as well:
   </script>
 </template>
 ```
+مرورگر محتوای درون `<template>` را «خارج از سند» در نظر می‌گیرد: استایل‌ها اعمال نمی‌شوند، اسکریپت‌ها اجرا نمی‌شوند، تگ `<video autoplay>` پخش نمی‌شود و غیره.
 
-The browser considers `<template>` content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>` is not run, etc.
-
-The content becomes live (styles apply, scripts run etc) when we insert it into the document.
+وقتی این محتوا را وارد سند (document) کنیم، فعال می‌شود (استایل‌ها اعمال می‌شوند، اسکریپت‌ها اجرا می‌شوند و غیره).
 
-## Inserting template
+## وارد کردن template
 
-The template content is available in its `content` property as a [DocumentFragment](info:modifying-document#document-fragment) -- a special type of DOM node.
+محتوای یک template از طریق ویژگی `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 رفتار کنیم، با یک تفاوت خاص: زمانی که آن را در جایی قرار می‌دهیم، فقط فرزندانش وارد سند می‌شوند، نه خود `DocumentFragment`.
 
-For example:
+برای مثال:
 
 ```html run
 <template id="tmpl">
@@ -64,7 +64,7 @@ For example:
 </script>
 ```
 
-Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
+بیایید یک مثال از Shadow DOM را از فصل قبلی با استفاده از `<template>` بازنویسی کنیم:
 
 ```html run untrusted autorun="no-epub" height=60
 <template id="tmpl">
@@ -87,9 +87,9 @@ Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
 </script>
 ```
 
-In the line `(*)` when we clone and insert `tmpl.content`, as its `DocumentFragment`, its children (`<style>`, `<p>`) are inserted instead.
+در خط `(*)`، زمانی که `tmpl.content` را کپی کرده و درج می‌کنیم، از آنجایی که یک `DocumentFragment` است، فرزندان آن (یعنی `<style>` و `<p>`) به جای خودش درج می‌شوند.
 
-They form the shadow DOM:
+این عناصر، Shadow DOM را تشکیل می‌دهند:
 
 ```html
 <div id="elem">
@@ -99,18 +99,18 @@ They form the shadow DOM:
 </div>
 ```
 
-## Summary
+## خلاصه
 
-To summarize:
+برای جمع‌بندی:
 
-- `<template>` content can be any syntactically correct HTML.
-- `<template>` content is considered "out of the document", so it doesn't affect anything.
-- We can access `template.content` from JavaScript, clone it to reuse in a new component.
+- محتوای `<template>` می‌تواند هر HTML با ساختار نحوی صحیح باشد.
+- محتوای `<template>` به‌عنوان «خارج از سند» در نظر گرفته می‌شود، بنابراین روی چیزی تأثیر نمی‌گذارد.
+- ما می‌توانیم از طریق JavaScript به `template.content` دسترسی پیدا کنیم و با کپی کردن آن، در یک کامپوننت جدید استفاده‌اش کنیم.
 
-The `<template>` tag is quite unique, because:
+تگ `<template>` ویژگی‌های منحصربه‌فردی دارد، زیرا:
 
-- 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 داخل آن را بررسی می‌کند (برخلاف استفاده از رشته قالب درون اسکریپت).
+- ...اما همچنان اجازه می‌دهد که از هر تگ HTML در سطح بالا استفاده شود، حتی تگ‌هایی که بدون تگ‌های محصورکننده منطقی نیستند (مثل `<tr>`).
+- وقتی محتوا وارد سند شود، تعاملی می‌شود: اسکریپت‌ها اجرا می‌شوند، ویدیوهای `<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>` به‌خودی‌خود هیچ مکانیزمی برای تکرار، اتصال داده‌ها (data binding) یا جایگزینی متغیرها ندارد، اما می‌توانیم این قابلیت‌ها را بر روی آن پیاده‌سازی کنیم.
\ No newline at end of file

From c4b499d428c7fa3a0cb25d3e271e458899f25380 Mon Sep 17 00:00:00 2001
From: Saman Zameni <53289765+samanzameni@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:53:32 +0330
Subject: [PATCH 2/3] Update article.md

Template element
---
 8-web-components/4-template-element/article.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 5fa9f87ec..5fe1774d4 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,7 +1,9 @@
 
-# Template element
+# Template element (عنصر قالب)
 
-عنصر داخلی <template> به‌عنوان یک فضای ذخیره‌سازی برای الگوهای HTML (HTML Markup Templates) عمل می‌کند. مرورگر محتوای درون آن را نادیده می‌گیرد و فقط از نظر صحت نگارشی (Syntax) آن را بررسی می‌کند، اما ما می‌توانیم با استفاده از JavaScript به آن دسترسی پیدا کنیم و از آن برای ایجاد عناصر دیگر استفاده کنیم.
+
+عنصر قالب 
+<template> به‌عنوان یک فضای ذخیره‌سازی برای الگوهای HTML (HTML Markup Templates) عمل می‌کند. مرورگر محتوای درون آن را نادیده می‌گیرد و فقط از نظر صحت نگارشی (Syntax) آن را بررسی می‌کند، اما ما می‌توانیم با استفاده از JavaScript به آن دسترسی پیدا کنیم و از آن برای ایجاد عناصر دیگر استفاده کنیم.
 
 از نظر تئوری، ما می‌توانیم هر عنصر نامرئی دیگری را در HTML قرار دهیم تا به‌عنوان فضای ذخیره‌سازی برای کد HTML استفاده شود. پس چه چیزی <template> را خاص می‌کند؟
 

From 110153ac3ede8d80dda161ed27965412322e43c3 Mon Sep 17 00:00:00 2001
From: Saman Zameni <53289765+samanzameni@users.noreply.github.com>
Date: Fri, 25 Apr 2025 14:30:09 +0330
Subject: [PATCH 3/3] Template element update

Template element
---
 8-web-components/4-template-element/article.md |  12 ++++--------
 8-web-components/4-template-element/img.png    | Bin 0 -> 492 bytes
 8-web-components/4-template-element/img_1.png  | Bin 0 -> 492 bytes
 8-web-components/4-template-element/img_2.png  | Bin 0 -> 492 bytes
 8-web-components/4-template-element/img_3.png  | Bin 0 -> 492 bytes
 8-web-components/4-template-element/img_4.png  | Bin 0 -> 438 bytes
 6 files changed, 4 insertions(+), 8 deletions(-)
 create mode 100644 8-web-components/4-template-element/img.png
 create mode 100644 8-web-components/4-template-element/img_1.png
 create mode 100644 8-web-components/4-template-element/img_2.png
 create mode 100644 8-web-components/4-template-element/img_3.png
 create mode 100644 8-web-components/4-template-element/img_4.png

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 5fe1774d4..b47c95766 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,15 +1,11 @@
 
 # Template element (عنصر قالب)
 
+عنصر داخلی  `<template>` به عنوان محلی برای ذخیره‌ی قالب‌های نشانه‌گذاری HTML استفاده می‌شود. مرورگر محتوای آن را نادیده می‌گیرد و تنها اعتبار نحوی آن را بررسی می‌کند، اما ما می‌توانیم با استفاده از JavaScript به آن دسترسی پیدا کنیم و برای ساخت سایر عناصر از آن استفاده کنیم.
+در تئوری، می‌توانیم هر عنصر نامرئی دیگری را در HTML برای ذخیره‌ی کد HTML قرار دهیم. پس چه چیزی `<template>` را خاص می‌کند؟
+اول از همه، محتوای آن می‌تواند هر HTML معتبری باشد، حتی اگر معمولاً نیاز به یک تگ محاط‌کننده داشته باشد.
+برای مثال، می‌توانیم یک ردیف جدول `<tr>`را داخل آن قرار دهیم:
 
-عنصر قالب 
-<template> به‌عنوان یک فضای ذخیره‌سازی برای الگوهای HTML (HTML Markup Templates) عمل می‌کند. مرورگر محتوای درون آن را نادیده می‌گیرد و فقط از نظر صحت نگارشی (Syntax) آن را بررسی می‌کند، اما ما می‌توانیم با استفاده از JavaScript به آن دسترسی پیدا کنیم و از آن برای ایجاد عناصر دیگر استفاده کنیم.
-
-از نظر تئوری، ما می‌توانیم هر عنصر نامرئی دیگری را در HTML قرار دهیم تا به‌عنوان فضای ذخیره‌سازی برای کد HTML استفاده شود. پس چه چیزی <template> را خاص می‌کند؟
-
-اول اینکه، محتوای آن می‌تواند هر کد HTML معتبری باشد، حتی اگر در حالت معمول نیاز به تگ محصورکننده‌ی مناسب داشته باشد.
-
-برای مثال، ما می‌توانیم یک ردیف جدول <tr> را درون آن قرار دهیم:
 
 ```html
 <template>
diff --git a/8-web-components/4-template-element/img.png b/8-web-components/4-template-element/img.png
new file mode 100644
index 0000000000000000000000000000000000000000..10469a23afd29be58e96a1a992e9ddfb8a5b3995
GIT binary patch
literal 492
zcmeAS@N?(olHy`uVBq!ia0y~yV44DCU*})~lG^{m8W<QDH+#A`hE&A8J;=xl6g;%x
lyMHb}y9kgu3I=Hi#7H%WGB8e!s#_0opr@;!%Q~loCID2p6cqpf

literal 0
HcmV?d00001

diff --git a/8-web-components/4-template-element/img_1.png b/8-web-components/4-template-element/img_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..10469a23afd29be58e96a1a992e9ddfb8a5b3995
GIT binary patch
literal 492
zcmeAS@N?(olHy`uVBq!ia0y~yV44DCU*})~lG^{m8W<QDH+#A`hE&A8J;=xl6g;%x
lyMHb}y9kgu3I=Hi#7H%WGB8e!s#_0opr@;!%Q~loCID2p6cqpf

literal 0
HcmV?d00001

diff --git a/8-web-components/4-template-element/img_2.png b/8-web-components/4-template-element/img_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..10469a23afd29be58e96a1a992e9ddfb8a5b3995
GIT binary patch
literal 492
zcmeAS@N?(olHy`uVBq!ia0y~yV44DCU*})~lG^{m8W<QDH+#A`hE&A8J;=xl6g;%x
lyMHb}y9kgu3I=Hi#7H%WGB8e!s#_0opr@;!%Q~loCID2p6cqpf

literal 0
HcmV?d00001

diff --git a/8-web-components/4-template-element/img_3.png b/8-web-components/4-template-element/img_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..10469a23afd29be58e96a1a992e9ddfb8a5b3995
GIT binary patch
literal 492
zcmeAS@N?(olHy`uVBq!ia0y~yV44DCU*})~lG^{m8W<QDH+#A`hE&A8J;=xl6g;%x
lyMHb}y9kgu3I=Hi#7H%WGB8e!s#_0opr@;!%Q~loCID2p6cqpf

literal 0
HcmV?d00001

diff --git a/8-web-components/4-template-element/img_4.png b/8-web-components/4-template-element/img_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e5ab740dd203b681eedb70a171324080f7683c9
GIT binary patch
literal 438
zcmeAS@N?(olHy`uVBq!ia0y~yV44DC@8)0vk|8H%E@WU}to3wp45^5FdytVAD0pbW
lcmG^|b`c<R6wo{b3bK|*F)%*9`{EbKDo<BGmvv4FO#qNk7H|Ln

literal 0
HcmV?d00001