سایه => shadow

Author: alas1n

8-web-components/3-shadow-dom/article.md

@@ -1,6 +1,6 @@
 # DOM سایه
 
-دلیل استفاده از DOM سایه جداسازی یا کپسوله کردن است.DOM سایه به یک المنت اجازه می دهد تا سند DOM "سایه‌ی" خود را داشته باشد، که به طور کامل از DOM سند اصلی جداسازی شده است، سند DOM سایه می‌تواند قوانین خاص خود را داشته باشد مثل style محلی مربوط به خود.
+دلیل استفاده از shadow DOM جداسازی یا کپسوله کردن است. shadow DOM به یک المنت اجازه می دهد تا سند DOM نهان(shadow) خود را داشته باشد، که به طور کامل از DOM سند اصلی جداسازی شده است، سند shadow DOM می‌تواند قوانین خاص خود را داشته باشد مثل style محلی مربوط به خود.
 
 ## DOM سایه های داخلی (Built-in)
 
@@ -35,22 +35,22 @@ input::-webkit-slider-runnable-track {
 <input type="range" />
 ```
 
-فراموش نکنید که `pseudo` یک ویژگی غیر استاندارد است. مرورگر‌ها در ابتدا به پیاده‌سازی آزمایشی کنترل‌های داخلی با استفاده از المان‌های DOM کردند بعد از گذشت زمان DOM سایه استاندارد سازی شد تا توسعه دهندگان بتوانند المان‌های کنترلی خود را بسازند.
+فراموش نکنید که `pseudo` یک ویژگی غیر استاندارد است. مرورگر‌ها در ابتدا به پیاده‌سازی آزمایشی کنترل‌های داخلی با استفاده از المان‌های DOM کردند بعد از گذشت زمان  shadow DOM استاندارد سازی شد تا توسعه دهندگان بتوانند المان‌های کنترلی خود را بسازند.
 
-در ادامه از DOM سایه استاندارد استفاده خواهیم کرد که در [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) توضیحات کاملی از آن موجود است.
+در ادامه از shadow DOM استاندارد استفاده خواهیم کرد که در [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) توضیحات کاملی از آن موجود است.
 
 ## درخت سایه (Shadow Tree)
 
 یک المان DOM می‌تواند دو نوع زیرمجموعه DOM داشته باشد:
 
-1. درخت روشن -- یک زیر مجموعه معمولی از DOM است که از زیرمجموعه HTML ساخته شده است. تمام مثال‌های که در فصول قبل دیدیم از نوع روشن بودند.
-2. درخت سایه -- یک زیرمجموعه پنهان از DOM است که در HTML نمایش داده نمی‌شود و از چشم مخفی است.
+1. light tree -- یک زیر مجموعه معمولی از DOM است که از زیرمجموعه HTML ساخته شده است. تمام مثال‌های که در فصول قبل دیدیم از نوع روشن بودند.
+2. shadow tree -- یک زیرمجموعه پنهان از DOM است که در HTML نمایش داده نمی‌شود و از چشم مخفی است.
 
-اگر المانی هر دو زیرمجموعه را داشت مرورگر فقط قسمت تاریک را نمایش خواهد داد. اما می توانیم نوعی ترکیب بندی بین درختان سایه و روشن ایجاد کنیم. جزیات بیشتر را در <info:slots-composition> خواهیم خواند.
+اگر المانی هر دو زیرمجموعه را داشت مرورگر فقط قسمت shadow را نمایش خواهد داد. اما می توانیم نوعی ترکیب بندی بین shadow trees و light ایجاد کنیم. جزیات بیشتر را در <info:slots-composition> خواهیم خواند.
 
-می‌توان از درخت سایه برای پنهان سازی المان‌های داخلی استفاده کرد و از استایل دهی محلی برای المان جدید استفاده کرد.
+می‌توان از shadow tree برای پنهان سازی المان‌های داخلی استفاده کرد و از استایل دهی محلی برای المان جدید استفاده کرد.
 
-برای مثال`<show-hello>` المان‌های داخلی خود را در درخت سایه پنهان می‌کند و مقدار نمایش داده شده را به عنوان ویژگی دریافت می‌کند.
+برای مثال`<show-hello>` المان‌های داخلی خود را در shadow tree پنهان می‌کند و مقدار نمایش داده شده را به عنوان ویژگی دریافت می‌کند.
 
 ```html run autorun height=60
 <script>
@@ -71,19 +71,19 @@ customElements.define('show-hello', class extends HTMLElement {
 
 ![](shadow-dom-say-hello.png)
 
-در ابتدا `elem.attachShadow({mode: …})` یک درخت سایه ایجاد می‌کند.
+در ابتدا `elem.attachShadow({mode: …})` یک shadow tree ایجاد می‌کند.
 
 ما در این جا ۲ محدودیت داریم:
-1. هر المان در صفحه فقط می‌تواند یک سایه داشته باشد.
-2. المان `elem` باید یک المان سفارشی سازی شده(custom) یا یکی از المان های "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", "span" باشد. دیگر المان ها مثل `<img>` نمی‌توانند سایه داشته باشند.
+1. هر المان در صفحه فقط می‌تواند یک shadow داشته باشد.
+2. المان `elem` باید یک المان سفارشی سازی شده(custom) یا یکی از المان های "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", "span" باشد. دیگر المان ها مثل `<img>` نمی‌توانند shadow داشته باشند.
 
  گزینه `mode` سطح جداسازی (encapsulation) را مشخص می‌کند. و باید یکی از دو مقدار زیر را داشته باشد:
-- `"open"` -- قابل دسترس باشد `elem.shadowRoot` که باعث می‌شود سایه تحت.
+- `"open"` -- قابل دسترس باشد `elem.shadowRoot` که باعث می‌شود shadow توسط.
 
-هر کدی قابلیت دسترسی به درخت سایه المان `elem` را دارد.
+هر کدی قابلیت دسترسی به shadow tree المان `elem` را دارد.
 - `"closed"` -- است `null` همیشه `elem.shadowRoot`.
 
-فقط با استفاده از مقدار(refrance) براگردانده شده از `attachShadow`(که احتمالا یک کلاس پنهان داخلی دارد) می‌توانیم به DOM سایه دسترسی پیدا کنیم. اما در مورد درخت‌های سایه بومی مرورگر مثل `<input type="range">` که بسته(`"closed"`) هستند٬ هیچ راهی برای دسترسی به این درخت‌های سایه وجود ندارد.
+فقط با استفاده از مقدار(refrance) براگردانده شده از `attachShadow`(که احتمالا یک کلاس پنهان داخلی دارد) می‌توانیم به shadow DOM دسترسی پیدا کنیم. اما در مورد shadow trees بومی مرورگر مثل `<input type="range">` که بسته(`"closed"`) هستند٬ هیچ راهی برای دسترسی به این shadow trees وجود ندارد.
 
 با [shadow root](https://dom.spec.whatwg.org/#shadowroot) که خروجی `attachShadow` است می‌توان مثل یک المان معمولی برخورد کرد و از `innerHTML` یا `append` برای پر کردن آن استفاده کرد.
 
@@ -96,17 +96,17 @@ alert(elem.shadowRoot.host === elem); // true
 
 ## جداسازی (Encapsulation)
 
-دسترسی DOM سایه به طول کامل از سند اصلی گرفته شده است.
+دسترسی shadow DOM به طول کامل از سند اصلی گرفته شده است.
 
-1. المان‌های DOM سایه توسط `querySelector` های DOM روشن قابل شناسایی نیستنتد. به طور دقیق‌تر المان‌های داخلی DOM سایه ممکن است id هایی یکسانی با المان‌های DOM روشن داشته باشند اما این idها باید در درخت سایه یکتا باشند.
-2. سند DOM سایه stylesheet مجزای مخصوص به خود را دارد. قوانین style خارجی (light DOM) در آن عمل نمی‌کنند.
+1. المان‌های shadow DOM توسط `querySelector` های DOM روشن قابل شناسایی نیستنتد. به طور دقیق‌تر المان‌های داخلی shadow DOM ممکن است id هایی یکسانی با المان‌های DOM روشن داشته باشند اما این idها باید در shadow tree یکتا باشند.
+2. سند stylesheet, DOM shadow مجزای مخصوص به خود را دارد. قوانین style خارجی (light DOM) در آن عمل نمی‌کنند.
 
 به مثال زیر توجه کنید:
 
 ```html run untrusted height=40
 <style>
 *!*
-  /* اجرا نمی‌شود (۱) #elem استایل سند بر درخت تاریک در 	
+  /* اجرا نمی‌شود (۱) #elem استایل سند بر shadow tree در 	
 */!*
   p { color: red; }
 </style>
@@ -116,24 +116,24 @@ alert(elem.shadowRoot.host === elem); // true
 <script>
   elem.attachShadow({mode: 'open'});
 *!*
-    // درخت تاریک استایل خود را دارد (۲)
+    // shadow tree استایل خود را دارد (۲)
 */!*
   elem.shadowRoot.innerHTML = `
     <style> p { font-weight: bold; } </style>
     <p>Hello, John!</p>
   `;
 
 *!*
-   // (۳) ‌های داخل درخت تاریک قابل دسترسی است qury فقط از <p>
+   // (۳) ‌های داخل shadow tree قابل دسترسی است qury فقط از <p>
 */!*
   alert(document.querySelectorAll('p').length); // 0
   alert(elem.shadowRoot.querySelectorAll('p').length); // 1
 </script>  
 ```
 
-1. استایل از سند اصلی هیچ تاثیری روی درخت تاریک ندارد.
+1. استایل از سند اصلی هیچ تاثیری روی shadow tree ندارد.
 2. اما استایل از داخل به خوبی کار می‌کند.
-3. برای دریافت المان‌های داخل درخت تاریک باید از داخل درخت تاریک این query‌ها را اجرا کنیم.
+3. برای دریافت المان‌های داخل shadow tree باید از داخل shadow tree این query‌ها را اجرا کنیم.
 
 ## منابع
 
@@ -144,14 +144,14 @@ alert(elem.shadowRoot.host === elem); // true
 
 ## خلاصه
 
-سایه DOM روشی است برای ایجاد یک المان محلی برای DOM.
+DOM روشی است برای ایجاد یک المان محلی برای shadow DOM.
 
 1. `shadowRoot = elem.attachShadow({mode: open|closed})` --یک دام سایه برای `elem` می‌سازد. اگر "mode="open باشد این المان با ویژگی `elem.shadowRoot` قابل دسترسی است.
 2. با استفاده از ویژگی `innerHtml` یا ویژگی های دیگر DOM موجود در `shadowRoot` می‌توان اجزای جدید به آن اضافه کرد.
 
 المان‌های DOM سایه:
 - داری فضای مجزای خود هستند.
 - از انتخابگر‌های جاوا اسکریپت موجد در DOM اصلی مثل `querySelector` پنهان هستند.
-- از استایل‌های موجود در درخت تاریک خود استفاده می‌کنند و نه از استایل موجود در DOM اصلی.
+- از استایل‌های موجود در shadow tree خود استفاده می‌کنند و نه از استایل موجود در DOM اصلی.
 
-اگر المانی در صفحه دارای DOM سایه بود، مرورگر به صورت پیشفرض المان‌های موجود در درخت تاریک را نمایش می‌دهد و از المان‌های DOM روشن یا همان زیرمجموعه‌های HTML معمول صرف نظر می‌کند. در فصل <info:slots-composition> در مورد ترکیب این دو بیشتر مطالعه می‌کنیم.
+اگر المانی در صفحه دارای DOM سایه بود، مرورگر به صورت پیشفرض المان‌های موجود در shadow tree را نمایش می‌دهد و از المان‌های DOM روشن یا همان زیرمجموعه‌های HTML معمول صرف نظر می‌کند. در فصل <info:slots-composition> در مورد ترکیب این دو بیشتر مطالعه می‌کنیم.