enhance some parts

Author: alas1n

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

@@ -1,8 +1,8 @@
-# سایه‌ DOM
+# DOM سایه
 
-دلیل استفاده از Shadow DOM جداسایزی یا (کپسوله کردن) است. Shadow DOM به یک المنت اجازه می دهد تا سند DOM "سایه‌ی" خود را داشته باشد، که به طور کامل از سند DOM اصلی قابل دسترسی نیست،سند Shadow DOM می‌تواند قوانین خاص خود را داشته باشد مثل style محلی مربوط به خود.
+دلیل استفاده از DOM سایه جداسازی یا کپسوله کردن است.DOM سایه به یک المنت اجازه می دهد تا سند DOM "سایه‌ی" خود را داشته باشد، که به طور کامل از DOM سند اصلی جداسازی شده است، سند DOM سایه می‌تواند قوانین خاص خود را داشته باشد مثل style محلی مربوط به خود.
 
-## سایه DOM های داخلی (Built-in)
+## DOM سایه های داخلی (Built-in)
 
 آیا تا به حال فکر کرده‌اید که چگونه کنترلرهای پیچیده مرورگر مثل المان زیر (ورودی محدود) ایجاد شده و style دهی می‌شوند؟
 
@@ -18,15 +18,15 @@
 
 ![](shadow-dom-range.png)
 
-همه اجزای زیرمجموعه‌ی `#shadow-root` را می‌توان "shadow DOM" نامید.
+همه اجزای زیرمجموعه‌ی `shadow-root#` را می‌توان "shadow DOM" نامید.
 
-چون المان‌های Shadow DOM داخلی (built-in) از المان‌های معمول DOM جدا سازی شده‌اند نمی‌توان با استفاده از انتخابگراهای جاوااسکریپت مرورگر به آنها دسترسی پیدا کرد.
+چون المان‌های Shadow DOM داخلی (built-in) از المان‌های معمول DOM جدا سازی شده‌اند نمی‌توان با استفاده از انتخابگرهای معمول جاوااسکریپت مرورگر به آنها دسترسی پیدا کرد.
 
 اگر در مثال بالا توجه کنید یک attribute به نام `pseudo` می‌بینید.`pseudo` یک ویژگی غیر استاندارد است که وجود آن دلایل تاریخی دارد اما با استفاده از آن می‌توانیم المان‌های زیرمجموعه را به شکل زیر style دهی کنیم.
 
 ```html run autorun
 <style>
-  /* make the slider track red */
+  /* رنگ ریل را به قرمز تغییر می‌دهد */
   input::-webkit-slider-runnable-track {
     background: red;
   }
@@ -35,11 +35,11 @@
 <input type="range" />
 ```
 
-فراموش نکنید که `pseudo` یک ویژگی غیر استاندارد است. مرورگر‌ها در ابتدا به پیاده‌سازی آزمایشی کنترل‌های داخلی با استفاده از المان‌های DOM کردند بعد از گذشت زمان shadow DOM استاندارد سازی شد تا توسعه دهندگان بتوانند المان‌های کنترلی خود را بسازند.
+فراموش نکنید که `pseudo` یک ویژگی غیر استاندارد است. مرورگر‌ها در ابتدا به پیاده‌سازی آزمایشی کنترل‌های داخلی با استفاده از المان‌های DOM کردند بعد از گذشت زمان DOM    سایه استاندارد سازی شد تا توسعه دهندگان بتوانند المان‌های کنترلی خود را بسازند.
 
-در ادامه از shadow DOM استاندارد استفاده خواهیم کرد که در [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) توضیحات کاملی از آن موجود است.
+در ادامه از DOM سایه استاندارد استفاده خواهیم کرد که در [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) توضیحات کاملی از آن موجود است.
 
-## درخت Sadow
+## درخت سایه (Shadow Tree)
 
 یک المان DOM می‌تواند دو نوع زیرمجموعه DOM داشته باشد:
 
@@ -50,7 +50,7 @@
 
 می‌توان از درخت سایه برای پنهان سازی المان‌های داخلی استفاده کرد و از استایل دهی محلی برای المان جدید استفاده کرد.
 
-برای مثال`<show-hello>` المان‌های داخلی خود را در سایه تاریک پنهان می‌کند و مقدار نمایش داده شده را به عنوان ویژگی دریافت می‌کند.
+برای مثال`<show-hello>` المان‌های داخلی خود را در درخت سایه پنهان می‌کند و مقدار نمایش داده شده را به عنوان ویژگی دریافت می‌کند.
 
 ```html run autorun height=60
 <script>
@@ -70,7 +70,7 @@
 <show-hello name="John"></show-hello>
 ```
 
-خروجی DOM بالا در Chrome dev tool به شکل زیر نشان داده می‌شود و تمام اجزا زیر مجموعه "#shadow-root" خواهد بود.
+خروجی DOM بالا در Chrome dev tool به شکل زیر نشان داده می‌شود و تمام اجزا زیر مجموعه "shadow-root#" خواهد بود.
 
 ![](shadow-dom-say-hello.png)
 
@@ -92,12 +92,10 @@
 
 - `"closed"` -- است `null` همیشه `elem.shadowRoot`.
 
-فقط با استفاده از مقدار(refrance) براگردانده شده از `attachShadow`(که احتمالا یک کلاس پنهان داخلی دارد) می‌توانیم به DOM تاریک دسترسی پیدا کنیم. اما در مورد درخت‌های تاریک بومی مرورگر مثل `<input type="range">` که بسته(`"closed"`) هستند٬ هیچ راهی برای دسترسی به این درخت‌های تاریک وجود ندارد.
+فقط با استفاده از مقدار(refrance) براگردانده شده از `attachShadow`(که احتمالا یک کلاس پنهان داخلی دارد) می‌توانیم به DOM سایه دسترسی پیدا کنیم. اما در مورد درخت‌های سایه بومی مرورگر مثل `<input type="range">` که بسته(`"closed"`) هستند٬ هیچ راهی برای دسترسی به این درخت‌های سایه وجود ندارد.
 
 با [shadow root](https://dom.spec.whatwg.org/#shadowroot) که خروجی `attachShadow` است می‌توان مثل یک المان معمولی برخورد کرد و از `innerHTML` یا `append` برای پر کردن آن استفاده کرد.
 
-The element with a shadow root is called a "shadow tree host", and is available as the shadow root `host` property:
-
 به المانی که دارای shadow root باشد "shadow tree host" گفته می‌شود و با استفاده از ویژگی "host" قابل دسترسی است:
 
 ```js
@@ -109,9 +107,9 @@ alert(elem.shadowRoot.host === elem); // true
 
 دسترسی DOM سایه به طول کامل از سند اصلی گرفته شده است.
 
-1. المان‌های DOM سایه توسط `querySelector` های DOM روشن قابل شناسایی نیستنتد. به طور دقیق‌تر المان‌های داخلی DOM سایه ممکن است id هایی یکسانی با المان‌های DOM روشن داشته باشند اما این idها باید در درخت تاریک یکتا باشند.
+1. المان‌های DOM سایه توسط `querySelector` های DOM روشن قابل شناسایی نیستنتد. به طور دقیق‌تر المان‌های داخلی DOM سایه ممکن است id هایی یکسانی با المان‌های DOM روشن داشته باشند اما این idها باید در درخت سایه یکتا باشند.
 
-2. دام تاریک stylesheet مجزای مخصوص به خود را دارد. قوانین style خارجی (light DOM) در آن عمل نمی‌کنند.
+2. سند DOM سایه stylesheet مجزای مخصوص به خود را دارد. قوانین style خارجی (light DOM) در آن عمل نمی‌کنند.
 
 به مثال زیر توجه کنید:
 
@@ -162,14 +160,14 @@ alert(elem.shadowRoot.host === elem); // true
 
 1. `shadowRoot = elem.attachShadow({mode: open|closed})` --
 
-یک دام سایه برای `elem` می‌سازد. اگر "mode="open باشد این المان با ویژگی `elem,shadowRoot` قابل دسترسی است.
+یک دام سایه برای `elem` می‌سازد. اگر "mode="open باشد این المان با ویژگی `elem.shadowRoot` قابل دسترسی است.
 
-2. با استفاده از ویژگی `innerHtml` یا ویژگی های دیگر DOM موجود در `shadowRoor` می‌توان اجزای جدید به آن اضافه کرد.
+2. با استفاده از ویژگی `innerHtml` یا ویژگی های دیگر DOM موجود در `shadowRoot` می‌توان اجزای جدید به آن اضافه کرد.
 
-المان‌های سایه DOM:
+المان‌های DOM سایه:
 
 - داری فضای مجزای خود هستند.
 - از انتخابگر‌های جاوا اسکریپت موجد در DOM اصلی مثل `querySelector` پنهان هستند.
 - از استایل‌های موجود در درخت تاریک خود استفاده می‌کنند و نه از استایل موجود در DOM اصلی.
 
-اگر المانی در صفحه دارای DOM سایه بود، مرورگر به صورت پیشفرض المان‌های موجود در درخت تاریک را نمایش می‌دهد و از المان‌های DOM روشن یا همان زیرمجموعه‌های HTML معمول صرف نظر می‌کند. در فصل <info:slots-composition> در مورد ترکیب این ۲ بیشتر مطالعه می‌کنیم.
+اگر المانی در صفحه دارای DOM سایه بود، مرورگر به صورت پیشفرض المان‌های موجود در درخت تاریک را نمایش می‌دهد و از المان‌های DOM روشن یا همان زیرمجموعه‌های HTML معمول صرف نظر می‌کند. در فصل <info:slots-composition> در مورد ترکیب این دو بیشتر مطالعه می‌کنیم.