Slot-elementit sisällön jakamista varten
Sijoita isäntäelementin sisältö varjo-DOM:iin nimettyjen ja oletus-slottien avulla
Slot-elementit sisällön jakamista varten on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Light DOM ja Shadow DOM
HTML:ssä mukautetun elementin sisään kirjoitetut lapset muodostavat elementin "light DOM" -osan — ne eivät kuulu shadow-puuhun. Oletusarvoisesti selain ei renderöi niitä; shadow-puun on pyydettävä niitä erikseen <slot>-elementin avulla.
Oletusslot
Shadow-puun sisällä oleva <slot>-elementti merkitsee kohdan, jossa light DOMin lapset näytetään. Ilman nimeä se on oletusslot, ja se hyväksyy kaikki host-elementin suorat lapset.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Nimetyt slotit
Useisiin slotteihin voi viitata nimen perusteella. Shadow-puussa määritellään <slot name="header">; käyttäjä ottaa sen käyttöön komennolla <h1 slot="header">. Lapset, joiden slot-attribuutti vastaa nimeä, täyttävät kyseisen slotin; vastaamattomat lapset päätyvät oletusslottiin.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Slotin varasisältö
Slot-tunnisteiden välissä oleva sisältö renderöidään vain, kun kyseiseen slottiin ei ole sijoitettu mitään: <slot>No content provided</slot>. Käyttäkää sitä tyhjiin slotteihin tarkoitetun paikkamerkki- tai ohjetekstin näyttämiseen.
Tyylien periytyminen slottien kautta
Slottiin sijoitetut lapset pysyvät light DOMissa ja perivät tyylit päädokumentista, eivät shadow-puusta. Käyttäkää shadow-puun sisältä ::slotted()-pseudoelementtiä niiden tyylittelyyn: ::slotted(p) { color: red; }.
::slotted-rajoitukset
::slotted() voi kohdistaa vain host-elementin suoriin lapsiin (elementteihin, jotka tosiasiassa jaetaan slottiin). Se ei voi kohdistaa niiden jälkeläisiin. Jos tarvitsette syvempää tyylittelyä, paljastakaa CSS-muuttujia tai käyttäkää sen sijaan ::part-valitsinta shadow-puun sisäisiin elementteihin.
Slot-muutosten havaitseminen
Jokainen slot lähettää slotchange-tapahtuman, kun siihen määritetyt solmut muuttuvat. Kuunnelkaa sitä reagoidaksenne dynaamisen sisällön päivityksiin: slot.addEventListener("slotchange", handler). Tämä on hyödyllistä komponenteissa, joiden asettelu riippuu siitä, mitä lapsia niissä on.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes ja assignedElements
slot.assignedNodes() palauttaa kaikki slotille määritetyt solmut (myös tekstisolmut). slot.assignedElements() palauttaa vain Element-lapset — yleensä juuri ne, joita haluatte käsitellessänne slotitettua sisältöä ohjelmallisesti.
Lapsielementtien jakaminen
Selain hoitaa kaiken jakamisen automaattisesti kunkin lapsen slot-attribuutin perusteella. JavaScript-vaihetta ei tarvita — kirjoittakaa host-elementin light DOM -lapsiin <span slot="footer">...</span>, niin vastaava shadow-slot sisältää sen.
Slotit ja host-elementin tyylittely
Host-elementin omat tyylit (jotka asetetaan dokumentissa <my-card>-elementille) kaskadoituvat light DOMin lapsille, myös niille, jotka lopulta sijoitetaan slottiin. Shadow CSS:n ::slotted-tyylillä on suurempi tarkkuus kuin periytyneillä host-tyyleillä, kun molemmat kohdistuvat samaan ominaisuuteen.
Yleisiä käyttötapauksia
Kortit, joissa on header-, body- ja footer-slotit; dialogit, joissa on title-, content- ja actions-slotit; listakohteet, joissa on leading- ja trailing-slotit; navigointivalikot, joissa on item-slotit. Slotit tekevät mukautetuista elementeistä yhdisteltäviä samalla tavoin kuin <details>/<summary> tai <table>/<tr>.
Tietojen tarkistus
Mitä eroa on oletusslotilla ja nimetylle slotilla?
Yhteenveto
Slotit sijoittavat light DOMin lapset tiettyihin kohtiin shadow-puussa. Oletusslotti ottaa vastaan kaikki nimeämättömät lapset, kun taas nimetyt slotit ottavat vastaan lapset, joiden slot-attribuutti vastaa nimeä. Varasisältö täyttää tyhjät slotit, ::slotted tyylittelee suorat slottiin sijoitetut lapset, ja slotchange-tapahtumilla voi reagoida dynaamisiin sisältöpäivityksiin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Slot-elementit sisällön jakamista varten” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Slot-elementit sisällön jakamista varten”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Slot-elementit sisällön jakamista varten”?
Sijoita isäntäelementin sisältö varjo-DOM:iin nimettyjen ja oletus-slottien avulla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Slot-elementit sisällön jakamista varten”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- attachShadow ja Shadow Root
- Slot-elementit sisällön jakamista varten
- Rajatut tyylit Shadow DOM:n sisällä
- Part ja exportparts ulkoista tyylittelyä varten