sorvell
commented
2 days ago This is a good question to ask in the Lit Discord channel.
applying the CSS to nested elements inside the slot
This isn't supported in CSS. You can only style slotted elements themselves using :slotted(...). So you have to write some code to do it...
How can we apply the css to span with class redText inside a P tag which is a slot. It would be helpful if you can share some examples.
Here is an example.
Do not use those workarounds, instead if you can't avoid the issue, I recommend copying a style into the parent scope and attempting to scope it so it applies narrowly.
static scopeStyles = css`
element-name {
/* whatever makes sense */
}
`;
connectedCallback() {
super.connectedCallback();
const {scopeStyles} = this.constructor as typeof MyElement;
const {adoptedStyleSheets} = this.getRootNode() as Document;
if (!adoptedStyleSheets.includes(scopeStyles.styleSheet)) {
adoptedStyleSheets.push(scopeStyles.styleSheet);
}
}
acn-rajesh-paidipati
Hi Team,
Could you please help us in applying the CSS to nested elements inside the slot.
Eg:
Render me in a slot
How can we apply the css to span with class redText inside a P tag which is a slot. It would be helpful if you can share some examples. I have already gone through your workarounds, but couldn't execute it.
Workaround 1 - Use Javascript To Style
(1) Access the slotted elements from javascript by using @queryAssignedElements (See https://lit.dev/docs/components/shadow-dom/#query-assigned-nodes)
(2) For each slotted element, parse its dom tree and style the child nodes using javascript (e.g. childelement.style.backgroundColor = '#ff0';)
Workaround 2 - Copy Slotted HTML to Another Div
(1) Access the slotted elements from javascript by using @queryAssignedElements (See https://lit.dev/docs/components/shadow-dom/#query-assigned-nodes)
(2) For every slotted element under consideration, copy-paste its outerHTML to another empty div, placed next to it.
(3) Since these initially empty divs are not from the slots, you can setup static css rules for them.
(4) Empty the slots after the copy pasting into the adjacent divs is complete.
Regards Rajesh