XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Styling einer Child-WebComponent (http://xhtmlforum.de/showthread.php?t=74161)

GELight 13.12.2020 22:32

Styling einer Child-WebComponent
 
Hi alle zusammen,

Aktuell bin ich dabei in einem Projekt WebComponents zu schreiben, mit denen ich die komplette UI aufbauen möchte. Dabei hänge ich an einem kleinen Problem fest:

Beispiel, wie das HTML in etwa ausschaut:
HTML-Code:

<my-actions>
  <my-button>Button 1</my-button>
  <my-button>Button 2</my-button>
  <my-button>Button 3</my-button>
</my-actions>

Mein Ziel wäre es, über <my-actions> per CSS die Abstände der Child-Components / also der Buttons zu steuern. Due Buttons sollen dumm bleiben. Das soll die übergeordnete Komponente steuern.

Hab jetzt schon mit :host() und :host-context() rumgespielt aber komme nich zu meinem gewünschten Ergebnis.

Mein Ziel wäre, ein Abstand zwischen jedem Button zu haben.
Mit typischen CSS würde ich es so z.B. machen:
PHP-Code:

my-button my-button {
  
margin-left10px;


Wie macht man es bei verschachtelten WebComponents richtig?
Dank euch für jeden Tipp.

Gruß Mario

cloned 14.12.2020 10:51

Geht es mit flexbox? Dass du zB folgendes schreibst:

Code:

my-actions {
  display: flex;
  gap: 10px;
}


GELight 14.12.2020 21:29

Sowas hatte ich auch schon aber ich hätte gern eine Lösung, wo ich das etwas spezifischer für bestimmte Komponenten angeben kann.

Hatte mal was gesehen von wegen:
HTML-Code:

:host my-button { ... }
... aber das hat null Auswirkung.
Kann ich nicht irgendwie ausgehend von meinem eigenen HOST ( also von my-actions aus ) meine Child-Tags beeinflussen?

Gruß Mario

GELight 14.12.2020 21:38

YEAHHHH.... für alle, die die Lösung interessiert.

HTML-Code:

:host ::slotted(*) { ... }
Grüße


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023