Use CSS selectors like :first-child inside shadow dom - css

Question

Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom?
The example is like this
CustomElement.html
<div id="parent-div>
<slot></slot>
</div>
App.html
<div>
<custom-element>
<div class="heading">Main Heading</div>
<div class="item">item 1</div>
<div class="item">item 1</div>
<div class="item">item 1</div>
<div class="heading">Second Heading</div>
<div class="item">item 1</div>
<div class="item">item 1</div>
<div class="item">item 1</div>
</custom-element>
</div>
what i want to do is find out the first .heading element and add custom styles to it. Since <div class=heading"> is actually a component, i can't add custom styling to it thinking only as the first heading.
P.S.:- I'm using angular-elements, if it helps

Answer 1

The same answer as I gave in your question yesterday
Slotted content is not moved to shadowDOM,
it remains (invisible) in lightDOM
and is REFLECTED in the shadowDOM <SLOT>
So SLOTTED content styling is done in the CSS scope where <custom-element> resides.
or with ::slotted( x )
From the docs:
::slotted can only take a compound selector (in the parenthesis). The reason of this > restriction is to make a selector style-engine friendly, in terms of performance.
So with your structure you can do:
::slotted(.heading) { }
or
::slotted(:first-child) { }
but not:
::slotted(.heading:first-child)
Because it is a complex selector, not a (simple) compound selector
So your headings can be styled in global CSS, and will REFLECT to slotted content:
my-element div.heading{
background:blue;
color:white;
}
If you want to encapsulate this styling you have to wrap everything in (another) component
You can target all UNnamed slotted content with:
::slotted(:not([slot])){
font-weight:bold;
}
Here is another JSFiddle to play with slotted styling:
https://jsfiddle.net/WebComponents/108ey7b2/

Answer 2

I found a workaround for this in JS way.
For each slot, we have a eventHandler called (slotchange). By using that we can get the DOM event for the slot whenever the slot changes. Like this (HTML)
<custom-element (slotchange)="onSlotChanged($event)"></custom-element>
JS
onSlotChanged($event) {
console.log($event) // Go and research yourself about this event, you'll find many things usefull.
$event.target.assignedNodes() // This will give you the array of every elements, that are in side of the shadow dom
// Example usage, adding the margin-bottom to only first time (css :firsh-child)
$event.target.assignedNodes()[0].shadowRoot.getElementById('some-id').style.marginBottom = '10px'
}
If you only need to add a property to the element, you don't have to query shadowDom like "node.shadowRoot". But, if you want to access the element inside the shadowRoot of that element, you have to use that