zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Styling einer Child-WebComponent

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2020, 22:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.12.2020, 10:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Geht es mit flexbox? Dass du zB folgendes schreibst:

Code:
my-actions {
  display: flex;
  gap: 10px;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.12.2020, 21:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 14.12.2020, 21:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard

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

HTML-Code:
:host ::slotted(*) { ... }
Grüße
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Styling Problem Cyborg CSS 11 01.07.2011 02:04
wichtig++++First Child baadshah CSS 1 10.05.2010 18:45
Clearen von child elementen majorbenks CSS 1 24.02.2010 18:08
Xampp murrt Schelm.isch Serveradministration und serverseitige Scripte 2 23.06.2008 19:11
parent, child, sisters? oma, opa, urgroßvater? :D nick (X)HTML 12 10.02.2008 18:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:10 Uhr.