pseudo-element-with-slotted-anchor.html (779B)
1 <!DOCTYPE html> 2 <title>Slotted anchor with anchored pseudo-element</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#target-anchor-element"> 4 <link rel="match" href="pseudo-element-with-slotted-anchor-ref.html"> 5 <my-anchor> 6 <template shadowrootmode="open"> 7 <style> 8 :host { 9 display: block; 10 } 11 12 ::slotted(*) { 13 display: block; 14 anchor-name: --anchor; 15 padding: 2rem; 16 background: red; 17 color: white; 18 inline-size: fit-content; 19 } 20 21 :host::after { 22 content: 'target'; 23 position: absolute; 24 position-anchor: --anchor; 25 position-area: bottom center; 26 background: lightblue; 27 padding: 1rem; 28 } 29 </style> 30 <slot></slot> 31 </template> 32 <span>anchor</span> 33 </my-anchor>