Styling-eine Web-Komponente

0
25

Das verwirrte mich ein bisschen das hier so Schreibe ich es heraus, während es frisch im Kopf. Nur weil Sie über eine web-Komponente bedeutet nicht, dass die Stile sind völlig isoliert. Haben Sie vielleicht den Inhalt in einem web-Komponente, die gestaltet ist, die normalerweise zusammen mit dem rest Ihrer website. Wie diese:

Finden Sie die Stift-Komponente mit Globalen Stilen (da keine Schatten DOM) von Chris Coyier (@chriscoyier) auf CodePen.

<Whats-up> – element isoliert die JavaScript-powered-Funktionalität, der sich durch das anbringen eines click-handler des <button> – innerhalb der it. Aber das styling der Knopf kommt von der globalen CSS angewendet zur Seite.

Aber lassen Sie uns sagen, wir bewegen uns, die <button> in die web-Komponente, so dass wir verwenden können <whats-up> ganz von selbst. Wir können das machen durch .innerHTML ‘ Ing das custom-element:

Finden Sie die Stift-Komponente mit Globalen Stilen (da keine Schatten DOM) von Chris Coyier (@chriscoyier) auf CodePen.

Wieder komplett gestylt durch die Globale CSS. Cool. Das mag wünschenswert sein. Es dürfte auch nicht wünschenswert sein. Vielleicht sind Sie auf der Suche nach web-Komponenten zu isolieren, die Stile für Sie. Web-Komponenten können über das Shadow DOM. Hier die gleiche Komponente, die Shadow-DOM statt:

Finden Sie die Stift-Komponente mit Lokalen Stile von Chris Coyier (@chriscoyier) auf CodePen.

Beachten Sie, dass die Funktionalität immer noch funktioniert (obwohl wir mussten querySelector<code> durch <code>shadowRoot), aber das haben wir Total verloren die globalen styling. Die Shadow-DOM-Grenze (Schatten root) verhindert styling kommen in oder ausgehen (sorta wie ein iframe).

Shadow Root

Es gibt keine Globale Weise zu durchdringen, dass die Grenze, die ich bewusst bin, also, wenn Sie wollen, um die Stile, die Sie gotta bringen Sie in der Vorlage.

Finden Sie die Stift-Komponente mit Lokalen Stile von Chris Coyier (@chriscoyier) auf CodePen.

Dies wäre höchst anstößig, wenn Sie beide wirklich wollten, verwenden Sie die Shadow-DOM-aber auch wollten, dass Ihre globalen Stilen. Es ist schon komisch, dass es ein Shadow-DOM “Modus” für die offen-und geschlossen-für das erlauben oder verbieten von JavaScript-in und-out, aber nicht CSS.

Wenn Sie ist, werden Sie wahrscheinlich benötigen, um mit @import unabhängig von globalen stylesheets können Sie zu bringen, in der die globalen Stile und hoffe, dass Sie zwischengespeichert werden und der browser wird smart über es in einer Weise, dass es nicht einen großen performance-hit.

Ich verwende CodePen ist eine direkte Verknüpfung zu den CSS-Funktion zu importieren, die Formate aus dem Stift selbst in die web-Komponente:

Finden Sie die Stift-Komponente mit Lokalen Stile von Chris Coyier (@chriscoyier) auf CodePen.

Eine weitere wichtige Sache zu wissen ist, dass benutzerdefinierte CSS-Eigenschaften durchdringen die Shadow-DOM! Das ist richtig, das tun Sie. Sie können wählen Sie die web-Komponente in der CSS, und legen Sie Sie dort:

Finden Sie die Pen-Web-Komponenten mit Benutzerdefinierten Eigenschaften von Chris Coyier (@chriscoyier) auf CodePen.