Bug 305886 – ::part(range)::-webkit-slider-thumb can not be an anchor element

• Component: Layout and Rendering
• Status: NEW

[James Stuckey Weber]

::-webkit-slider-thumb can be used as an anchor element, but it appears not possible when the range input is in a shadow DOM.

Minimal reproduction-

<styles-outside>
  <template shadowrootmode="open">
    <input type="range" part="slider"></input>
    <div part="label">shadow, styles outside</div>
  </template>
</styles-outside>


<style>
styles-outside::part(slider)::-webkit-slider-thumb {
  anchor-name: --in;
}
styles-outside::part(label) {
  position: absolute;
  position-area: end;
  position-anchor: --in;
}
</style>

I've tested that you can select the thumb with `inline-demo::part(slider)::-webkit-slider-thumb` for other styles. Styles inside the shadow DOM can make the thumb a valid anchor. 

Codepen- https://codepen.io/jamessw/pen/qENmzNq/fdfcc35d41d206e88091af42ee2e8f90. 

This works in Chrome, but can't be expected to work in Firefox given the non-standard ::-webkit-slider-thumb.

[Radar WebKit Bug Importer]

<rdar://problem/169049096>