Ben özel HTML etiketine <component> veya <slot> içeriğine erişmek Can

Question

ı gibi özel bir html öğesi oluşturmak istediğimizi varsayalım: Ben

<div class="wrapper"> 
    etc.. 
    <content></content> 
</div> 

Ardından: Böyle bir şablon oluşturmak Yani

<video-container> 
    <video></video> 
</video-container> 

Bir HTML Öğesi Prototip createdCallback aracılığıyla sayfaya ekleyin. geçirilen video etiketi erişmek için yine varsa ben play, pause vb şeyler böylece video elemana dinleyicileri eklemek mümkün istiyorum o callback'inde İçinde

.. Bana net değil. elimden content etiketine erişebilir, ancak hiçbir çocuk düğümünü göstermez. Mümkün mü?

Tüm belgeyi alıp video öğesini alsam video öğesine erişebilirim ancak bu çirkin bir şey çünkü sadece bu özel öğenin kapsamındaki video etiketini alabiliyorum.

Answer 1

Sen özel öğe kendisinde querySelector kullanarak erişmek gerekir

Doğrudan yol:

VideoContainerPrototype.createdCallback = function() 
{ 
    var video1 = this.querySelector('video') 
} 

Sen Gölge DOM geçmek gerekmez.

---

Gölge yolu

Ama Gölge kökünden almak istiyorsanız web <slot> elemanı (<content> üzerine eskiden getDistributedNodes()) üzerinde assignedNodes() yöntemi kullanabilirsiniz:

var video2 = this.shadowRoot.querySelector('slot').assignedNodes()[1] 

Eklenmiş bir Nod Dizisi döndürür. Örneğinizde, [0] dizininde bir Node düğümü varsa, [1] adresindeki Düğüm'ü almanız gerekir.

Not:<video> öğenizi index [0] 'da almak istiyorsanız, adlandırılmış yuvaları da kullanabilirsiniz.