JavaScript Shadow DOM Nedir?
JavaScript Shadow DOM API, Web Bileşenlerinin kapsüllenmesini kolay uygulama haline getirmenin önemli bir parçasıdır. Shadow DOM, bileşen tabanlı uygulamalar ve web siteleri oluşturmak için kullanılan bir araçtır.
Gölge Ağaçları, web sitesinin farklı bölümlerinin stilinin karışmasını önlemek için bileşenlerin işaretlemesini ve stilini sayfadaki diğer kodlardan ayrı tutmamızı sağlar. Kısacası Shadow DOM Normal DOM’un içerisine element kapsüllemeye yarar. Kapsüllenen element normal DOM dan ayrı tutulur.
- Shadow Host: DOM’un eklendiği düğüm.
- Shadow Tree: DOM’un içindeki DOM ağacı.
- Shadow Boundary: gölge DOM’un bittiği ve normal DOM’un başladığı yer.
- Shadow Root: Gölge ağacının kök düğümü.
Shadow DOM Nasıl Çalışır?
DOM’u bir tarayıcının bir sayfanın düzenini anlamak için kullandığı ağaç benzeri bir yapı olarak düşünebilirsiniz. Şuna benzeyen HTML yazdığınızda:
<html>
<head>
<title>DOM differences</title>
<style>
h1 {
color: green
}
</style>
</head>
<body>
<h1>I belong to the light DOM</h1>
</body>
</html>Tarayıcı şöyle bir yapı görünür:
html
|
| head
|
| title
| style
| body
|
| h1Son web standartları eklemeleri Shadow DOM’u ortaya çıkardı. Shadow DOM, öğelerin “gizli” olduğu bir DOM alt ağacı eklemenize izin veren bir web API’sidir. Yukarıdaki örneği bir kez daha alarak, bir tane daha eklemek istediğimizi varsayalım. h1 öğe yalnızca bu sefer, shadow DOM’a eklendi. Tarayıcı bu ağacı şu şekilde yorumlayacaktır:
html
|
| head
|
| title
| style
| body
|
| h1
---------- (shadow boundary(Gölge Sınırı))
|
| h1Shadow DOM, bir gölge DOM’deki öğeler etrafında oluşturulan “gölge sınırı” adı verilen bir ayrım sunar. Esasen, normal DOM’a uygulanan hiçbir stil bu gölge sınırından sızmayacaktır. Ayrıca, gölge DOM’de tetiklenen JavaScript olayları, varsayılan olarak bunun dışındaki öğeleri etkilemez (ancak bu davranışın üzerine kasıtlı olarak yazılabilir). Bu, katı bir bölünme duygusunu zorlar ve HTML öğeleri arasında kapsüllemeyi zorunlu kılar.
Peki, shadow DOM’a yeni bir öğe ekleyerek HTML sayfamızı değiştirelim:
<body>
<h1>I belong to the light DOM</h1>
<script>
const el = document.createElement("div");
const shadowRoot = el.attachShadow({ mode: "open" });
shadowRoot.innerHTML = "<h1>I belong to shadow DOM</h1>";
const container = document.querySelector("body");
container.appendChild(el);
</script>
</body>Burada, tamamen JavaScript’te bir öğe oluşturuyoruz. attachShadow yöntemini çağırıyoruz ve gölge DOM’a etkili bir şekilde ekledik. ( mode:open özniteliği basitçe, öğenin shadow DOM’un dışından sorgulanabileceği anlamına gelir’) Bundan sonra, bu yeni öğeyi HTML sayfasının gövdesine ekleriz.
Çıktısı:
Birçok yönden, bu şaşırtıcı! Sonuçta, sayfanın en üstündeki CSS kuralı diyor ki, her h1 yeşil renkli olmalıdır. Ama çünkü ikinci h1 aslında shadow DOM’dadır, dış stiller ve JavaScript olayları shadow dom’u etkilemez.
Gölge DOM yani Shadow DOM kafa karıştırıcı olabilir fakat mantığı çok basittir. Sayfanın stil ve javascript dosyalarından etkilenmeyen yeni ve ayrı elementler oluşturmamıza yardımcı olan güzel bir özelliktir.
Turkish
English