روشن => light

Author: alas1n

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

@@ -1,8 +1,8 @@
-# DOM سایه
+# Shadow DOM
 
 دلیل استفاده از shadow DOM جداسازی یا کپسوله کردن است. shadow DOM به یک المنت اجازه می دهد تا سند DOM نهان(shadow) خود را داشته باشد، که به طور کامل از DOM سند اصلی جداسازی شده است، سند shadow DOM می‌تواند قوانین خاص خود را داشته باشد مثل style محلی مربوط به خود.
 
-## DOM سایه های داخلی (Built-in)
+## Shadow DOM های داخلی (Built-in)
 
 آیا تا به حال فکر کرده‌اید که چگونه کنترلرهای پیچیده مرورگر مثل المان زیر (ورودی محدود) ایجاد شده و style دهی می‌شوند؟
 
@@ -43,7 +43,7 @@ input::-webkit-slider-runnable-track {
 
 یک المان DOM می‌تواند دو نوع زیرمجموعه DOM داشته باشد:
 
-1. light tree -- یک زیر مجموعه معمولی از DOM است که از زیرمجموعه HTML ساخته شده است. تمام مثال‌های که در فصول قبل دیدیم از نوع روشن بودند.
+1. light tree -- یک زیر مجموعه معمولی از DOM است که از زیرمجموعه HTML ساخته شده است. تمام مثال‌های که در فصول قبل دیدیم از نوع light بودند.
 2. shadow tree -- یک زیرمجموعه پنهان از DOM است که در HTML نمایش داده نمی‌شود و از چشم مخفی است.
 
 اگر المانی هر دو زیرمجموعه را داشت مرورگر فقط قسمت shadow را نمایش خواهد داد. اما می توانیم نوعی ترکیب بندی بین shadow trees و light ایجاد کنیم. جزیات بیشتر را در <info:slots-composition> خواهیم خواند.
@@ -98,7 +98,7 @@ alert(elem.shadowRoot.host === elem); // true
 
 دسترسی shadow DOM به طول کامل از سند اصلی گرفته شده است.
 
-1. المان‌های shadow DOM توسط `querySelector` های DOM روشن قابل شناسایی نیستنتد. به طور دقیق‌تر المان‌های داخلی shadow DOM ممکن است id هایی یکسانی با المان‌های DOM روشن داشته باشند اما این idها باید در shadow tree یکتا باشند.
+1. المان‌های shadow DOM توسط `querySelector` های light DOM قابل شناسایی نیستنتد. به طور دقیق‌تر المان‌های داخلی shadow DOM ممکن است id هایی یکسانی با المان‌های light DOM داشته باشند اما این idها باید در shadow tree یکتا باشند.
 2. سند stylesheet, DOM shadow مجزای مخصوص به خود را دارد. قوانین style خارجی (light DOM) در آن عمل نمی‌کنند.
 
 به مثال زیر توجه کنید:
@@ -146,12 +146,12 @@ alert(elem.shadowRoot.host === elem); // true
 
 DOM روشی است برای ایجاد یک المان محلی برای shadow DOM.
 
-1. `shadowRoot = elem.attachShadow({mode: open|closed})` --یک دام سایه برای `elem` می‌سازد. اگر "mode="open باشد این المان با ویژگی `elem.shadowRoot` قابل دسترسی است.
+1. `shadowRoot = elem.attachShadow({mode: open|closed})` --یک shadow DOM برای `elem` می‌سازد. اگر "mode="open باشد این المان با ویژگی `elem.shadowRoot` قابل دسترسی است.
 2. با استفاده از ویژگی `innerHtml` یا ویژگی های دیگر DOM موجود در `shadowRoot` می‌توان اجزای جدید به آن اضافه کرد.
 
-المان‌های DOM سایه:
+المان‌هایshadow DOM:
 - داری فضای مجزای خود هستند.
 - از انتخابگر‌های جاوا اسکریپت موجد در DOM اصلی مثل `querySelector` پنهان هستند.
 - از استایل‌های موجود در shadow tree خود استفاده می‌کنند و نه از استایل موجود در DOM اصلی.
 
-اگر المانی در صفحه دارای DOM سایه بود، مرورگر به صورت پیشفرض المان‌های موجود در shadow tree را نمایش می‌دهد و از المان‌های DOM روشن یا همان زیرمجموعه‌های HTML معمول صرف نظر می‌کند. در فصل <info:slots-composition> در مورد ترکیب این دو بیشتر مطالعه می‌کنیم.
+اگر المانی در صفحه دارایshadow DOM بود، مرورگر به صورت پیشفرض المان‌های موجود در shadow tree را نمایش می‌دهد و از المان‌های light DOM یا همان زیرمجموعه‌های HTML معمول صرف نظر می‌کند. در فصل <info:slots-composition> در مورد ترکیب این دو بیشتر مطالعه می‌کنیم.