demo · v130

Slotted-component responsiveness

Web component with shadow DOM, slotted content from the light tree, container query in the host page. Chrome 130 traverses the flat tree to resolve @container — meaning slotted content reflows when the host container changes. Drag the resizer, watch the breakpoints fire, and compare against simulated pre-Chrome-130 behaviour where slotted content stayed frozen.

540px

light DOM / host page

Eka Anderson Curator, slow-textiles archive 42 follows · joined 2017 Send a quiet message

what's happening


      

    

  


  

    
the code


/* Inside user-card's shadow DOM */
:host { display: grid; gap: 0.5rem; padding: 1rem; border: 1px solid; }

/* This container query is on the HOST element. In Chrome 130, the slotted
   light-DOM <span slot="*"> nodes resolve @container against the flat-tree
   ancestor — meaning they pick up the host page's container-name "card". */
@container card (min-width: 420px) {
  ::slotted([slot="meta"]) { display: inline; opacity: 0.7; }
}
@container card (max-width: 419px) {
  ::slotted([slot="meta"])   { display: block; font-size: 0.85em; }
  ::slotted([slot="action"]) { font-size: 0.9em; }
}

  


  

    
see also