[docs] No search results for How can we apply CSS styles to nested elements inside the slot

[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

[sorvell]

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 Steve, Thank you so much for your detailed explanation and the example you shared. It clarified a lot of my doubts, and I appreciate the guidance. I do have a couple of follow-up queries regarding this approach: 1. Could this approach have any potential performance implications on the component, especially if used extensively? 2. Is it acceptable to inject an entire component's CSS (around 30–40 lines) to style the slot elements using this method? Our primary use case involves form controls, and we want to ensure there are no significant limitations or drawbacks before proceeding. Looking forward to hearing your thoughts. Thanks again for your help! Best regards, Rajesh

[sorvell]

1. Could this approach have any potential performance implications on the component, especially if used extensively?

I can't guarantee anything, but I wouldn't expect performance issues.

2. Is it acceptable to inject an entire component's CSS ... we want to ensure there are no significant limitations or drawbacks before proceeding

The main drawback is the need to avoid conflicting with user styling. A more general approach would be to provide a stylesheet along with your elements for users to apply themselves, but if your user base is limited, say to your company, the auto-injection approach may be reasonable.

I'd recommend trying to manually scope the styles to apply inside your elements as much as possible (the example showed a simple approach), and I would also recommend using an @layer to help control the cascade more easily.

[acn-rajesh-paidipati]

Thanks Steve, appreciate your quick response and the insights you provided. From: Steve Orvell ***@***.***> Date: Thursday, 21 November 2024 at 4:25 AM To: lit/lit.dev ***@***.***> Cc: Paidipati, Rajesh ***@***.***>, Author ***@***.***> Subject: [External] Re: [lit/lit.dev] [docs] No search results for `How can we apply CSS styles to nested elements inside the slot` (Issue #1384) External email. Inspect before opening any links or attachments. 1. Could this approach have any potential performance implications on the component, especially if used extensively? I can't guarantee anything, but I wouldn't expect performance issues. 1. Is it acceptable to inject an entire component's CSS ... we want to ensure there are no significant limitations or drawbacks before proceeding The main drawback is the need to avoid conflicting with user styling. A more general approach would be to provide a stylesheet along with your elements for users to apply themselves, but if your user base is limited, say to your company, the auto-injection approach may be reasonable. I'd recommend trying to manually scope the styles to apply inside your elements as much as possible (the example showed a simple approach), and I would also recommend using an @***@***.***__;!!OrxsNty6D4my!4a3-cdqq-sN4jQwlW7JqwB_yuWsNSF3-HZU-5rPUYn75yhirxK0sO9u1Om9w21NTHm3dVNn5qVL568aSCDtb_j5vqC_DMDTv$> to help control the cascade more easily. — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/lit/lit.dev/issues/1384*issuecomment-2489698449__;Iw!!OrxsNty6D4my!4a3-cdqq-sN4jQwlW7JqwB_yuWsNSF3-HZU-5rPUYn75yhirxK0sO9u1Om9w21NTHm3dVNn5qVL568aSCDtb_j5vqDFawq0E$>, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/BI2JMC5ALZULZYD4ZPNKCX32BUHMTAVCNFSM6AAAAABSDU3U2WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBZGY4TQNBUHE__;!!OrxsNty6D4my!4a3-cdqq-sN4jQwlW7JqwB_yuWsNSF3-HZU-5rPUYn75yhirxK0sO9u1Om9w21NTHm3dVNn5qVL568aSCDtb_j5vqEj1BDeh$>. You are receiving this because you authored the thread.Message ID: ***@***.***>

…

________________________________ This message is for the designated recipient only and may contain privileged, proprietary, or otherwise confidential information. If you have received it in error, please notify the sender immediately and delete the original. Any other use of the e-mail by you is prohibited. Where allowed by local law, electronic communications with Accenture and its affiliates, including e-mail and instant messaging (including content), may be scanned by our systems for the purposes of information security, AI-powered support capabilities, and assessment of internal compliance with Accenture policy. Your privacy is important to us. Accenture uses your personal data only in compliance with data protection laws. For further information on how Accenture processes your personal data, please see our privacy statement at https://www.accenture.com/us-en/privacy-policy.

______________________________________________________________________________________ www.accenture.com