HTML-Vorlagen Slots und Zitzen auf einem Stier

Kann jemand bestätigen, oder verweisen Sie mich auf vorgeschlagene Dokumentation für die Regeln für die Übereinstimmung eines Host Elements "slot =" - Bezeichner mit einer Vorlage Tag?HTML-Vorlagen Slots und Zitzen auf einem Stier

Ich hatte sehr gehofft, dass es ein einfacher NAME-Matching-Prozess war, unabhängig von der Tiefe und Position der entsprechenden Slots im Light DOM im Vergleich zum Shadow DOM, aber leider scheint die Ahnenlinie ein übergeordneter Faktor zu sein. IOW ein Kind-Steckplatz in der Light-DOM wird nicht einen Enkel Slot im Schatten DOM füllen, auch wenn die Namen übereinstimmen. Ist das richtig?

Es erinnert mich sehr an COBOLs MOVE CORR-Regeln in Bezug auf Levels, aber diese Einschränkung setzt voraus, dass der Autor des Haupt-Seitenautors die Schatten-DOM-Rendering-SLOTs der Komponente für unbrauchbar hält.

Browser: Chrome 58.0.3029.96 (64-Bit)

This scheint Nachkomme Tiefe zu sagen, sollte kein Problem sein, solange Wurzeln sind ok. Oder habe ich es falsch gelesen?

Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
<template id="contact-template"> 
    <style> 
     :host { border: solid 1px #ccc; border-radius: 0.5rem; padding: 0.5rem; margin: 0.5rem; } 
     b { display: inline-block; width: 5rem; } 
    </style> 
    <b>HELLO</b><br/> 
    <b>Name</b>: <slot name="fullName"><slot name="firstName"></slot> <slot name="lastName"></slot></slot><br> 
    <b>Email</b>: <slot name="email">Unknown</slot><br> 
    <b>Address</b>: <slot name="address">Unknown</slot> 
    <slot></slot> 
</template> 
<script> 
window.addEventListener('DOMContentLoaded', function() { 
    var contacts = document.getElementById('contacts').children; 
    var template = document.getElementById('contact-template').content; 
    alert("Hello"+contacts.length); 
     document.getElementById("d").attachShadow({mode: 'open'}).appendChild(template.cloneNode(true)); 

    return; 

    for (var i = 0; i < contacts.length; i++) 
     contacts[i].attachShadow({mode: 'open'}).appendChild(template.cloneNode(true)); 
}); 
</script> 
</head> 
<body onload="load()"> 

<p id="demo">Click the button to change the text in this paragraph.</p> 

<button onclick="myFunction()">Try it</button> 
<div id="contacts"> 
<div id="d"> 
<span slot="email">span it</span> 
    <div name="removeToWork"> 
     <div slot="fullName">Commit Queue</div> 
     (<a slot="email" href="mailto:[email protected]">[email protected]</a>)<br> 
     <span slot="address">One Infinite Loop, Cupertino, CA 95014</span> 
    </div> 
</div> 


<script> 
function myFunction() { 
    document.getElementById("demo").innerHTML = "Hello World"; 
} 

function load() { 

} 

</script> 

</body> 
</html>

Quelle

2017-05-17 McMurphy

Das slotable (ein Element mit dem Attribute slot) nur im Schatten DOM eingesetzt werden, wenn es ein direktes Kind des Schatten DOM-Host ist.

Vom specification:

Für jedes slotable Kind von Host, slotable, in Baum um, führen diese Teilschritte:

Also Enkel werden nicht zusammenpassen.

<div id="host"> 
    <div slot="s1">Can match</div> 
    <div slot="s2">Can match</div> 
    <div> 
    <div slot="s3">Won't match</div> 
    </div> 
</div>

Quelle

2017-05-17 09:11:51 Supersharp

Ja, ich hatte gehofft, dass "Baumreihenfolge" Rekursivität enthalten. Dennoch widerspricht dieses Beispiel sicherlich dem, was Sie sagen und meiner persönlichen Erfahrung: - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot summary/detail elements nicht real nodes/children? – McMurphy

Slot-Element und Slotable-Element nicht verwechseln: Die direkte Kind-Constraint bezieht sich auf Slotable. Ein Slot kann ein Enkelkind im Schattenbaum sein. – Supersharp

Sie Bewdy! Danke Kumpel. Macht viel mehr Sinn. – McMurphy

HTML-Vorlagen Slots und Zitzen auf einem Stier

Antwort

Verwandte Themen