Het stylen van een Web Component

0
13

Dit verwarde me een beetje hier, dus ik schrijf het uit, terwijl het nog vers in het achterhoofd. Gewoon omdat je met behulp van een web component betekent niet dat de stijlen van het zijn volledig geïsoleerd. Misschien hebt u de inhoud in een web component die is ingericht normaal gesproken samen met de rest van uw website. Zoals deze:

Zie de Pen Web Component met Globale Stijlen (omdat er geen Schaduw DOM) van Chris Coyier (@chriscoyier) op CodePen.

Dat <wat> element geïsoleerd van de JavaScript-aangedreven functionaliteit van zichzelf door middel van een klik-handler voor de knop <> de binnenkant van het. Maar de styling van de knop komt van de wereldwijde CSS toegepast op die pagina.

Maar laten we zeggen dat we dat de knop <> in het web component, dus we kunnen gebruiken <whats-up> allemaal zelf. We zouden dat kunnen doen door .innerHTML ‘ ing van de aangepaste element:

Zie de Pen Web Component met Globale Stijlen (omdat er geen Schaduw DOM) van Chris Coyier (@chriscoyier) op CodePen.

Nogmaals, volledig ingericht door de wereldwijde CSS. Koel. Dat kan het wenselijk zijn. Het kan ook niet wenselijk. Misschien bent u op zoek naar web components voor het isoleren van stijlen voor u. Web components kan dat doen via de Schaduw van de DOM. Hier is hetzelfde component, met Schaduw DOM in de plaats:

Zie de Pen Web Component met Lokale Stijlen van Chris Coyier (@chriscoyier) op CodePen.

Merk op dat de functionaliteit nog steeds werkt (hoewel we moesten querySelector<code> door de <code>shadowRoot), maar we hebben totaal verloren de global styling. De Schaduw DOM boundry (shadow root) voorkomt styling komen of uit te gaan (ongeveer zoals een iframe).

Shadow Root

Er is geen algemene manier om door te dringen dat de grens die ik ben me bewust van, dus als je wilt om stijlen in, je moet hen brengen naar het sjabloon.

Zie de Pen Web Component met Lokale Stijlen van Chris Coyier (@chriscoyier) op CodePen.

Dit zou zeer onaangenaam als je allebei echt wilde de Schaduw DOM, maar wilde ook uw globale stijlen. Het is grappig dat er een Schaduw DOM “modus” voor open en gesloten voor het toestaan of tegenhouden van JavaScript in en uit, maar niet in CSS.

Als dat je is, zul je waarschijnlijk nodig hebt om een @import wat global stylesheets u aan om in die globale stijlen en hoop dat ze in de cache van de browser is het slim om het op zo een manier dat het niet een grote invloed op de systeemprestaties.

Ik gebruik CodePen de directe link naar de CSS-functie voor het importeren van de stijlen uit de Pen zich in de web-component:

Zie de Pen Web Component met Lokale Stijlen van Chris Coyier (@chriscoyier) op CodePen.

Een ander belangrijk ding om te weten is dat CSS aangepaste eigenschappen doordringen in de Schaduw van de DOM! Dat klopt, dat doen ze. U kunt selecteren op het web component in de CSS en zet ze er:

Zie de Pen Web Component met Aangepaste Eigenschappen van Chris Coyier (@chriscoyier) op CodePen.