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 28.12.2020, 17:19
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,

Ich beschäftige mich immer noch mit CSS und Web Components und hänge gerade an einem Problem. Frage dazu:

Ist es möglich, eine Child - WebKomponent abhängig einer CSS Class / oder Attribut vom HOST Element zu manipulieren?

Beispiel:

HTML-Code:
<outer-component class="test">
  <child-component></child-component>
  <child-component></child-component>
</outer-component>
Beispiel, wie ich mir das auf der CSS Seite innerhalb der "outer-component" vorstelle:

HTML-Code:
// Default style aller child components

::slotted(*) {
  background: gray;
}

// Style aller child components, wo outer-component die Klasse "test" hat.

:host(.test) ::slotted(*) {
  background: green;
}
Mir ist bewisst, dass ":host(.test) ::slotted(*)" nicht funktioniert, da ich es schon getestet habe aber gibt es keine Möglichkeit, eine child Komponente im Slot abhängig einer Klasse oder Attribut zu stylen?

Gruß Mario
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.01.2021, 16:39
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.963
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Mit CSS würde es so gehen:

Code:
.test * {
background: green;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.01.2021, 16:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard Css

Aber leider nicht innerhalb einer Web-Component.
Hier gibt es nur
HTML-Code:
::slotted(*) { ... }
... um den Components im Slot etwas mitzugeben.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.01.2021, 09:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
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

Habe leider keine direkte Antwort, aber google hat vor kurzem erst das Dokument veröffentlich welches sie verwendet haben um die dev tools auf web components umzustellen.
Hier findest du vielleicht generelle Antworten darauf wie man WC in großen Projekten einsetzt:
https://developers.google.com/web/up...web-components
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 01:04
wichtig++++First Child baadshah CSS 1 10.05.2010 17:45
Clearen von child elementen majorbenks CSS 1 24.02.2010 17:08
Xampp murrt Schelm.isch Serveradministration und serverseitige Scripte 2 23.06.2008 18:11
parent, child, sisters? oma, opa, urgroßvater? :D nick (X)HTML 12 10.02.2008 17:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:38 Uhr.