Closed
Description
Description
In Synthetic Shadow DOM mode, When multiple elements set their id attribute and id-referencing attributes to a common value in HTML Template, they are all transformed to a new common value in rendered HTML, thus preserving the reference.
This can be observed with aria-labelledby, aria-describedby and for id-referencing attribute.
However no transformation is applied to popovertarget attribute, thus breaking the reference
Steps to Reproduce
<template>
<label for="form-element">Hello</label>
<input id="form-element" type="text" />
<button aria-describedby="helptext">Hello</button>
<section id="helptext">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</section>
<button popovertarget="popover-id">Hello</button>
<section id="popover-id" popover>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</section>
</template>Expected Results
popovertarget's value should be transformed to be as same as that of id's value in section[popover]
Actual Results
popovertarget's value is not transformed.
Browsers Affected
All
Version
- LWC: x.x.x
Possible Solution
Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.
Rendered HTML for above example
<main-playground lwc-8oejcplpid="" dir="ltr">
<label for="form-element-1">Hello</label>
<input type="text" id="form-element-1" />
<button aria-describedby="helptext-1">Hello</button>
<section id="helptext-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
</section>
<button popovertarget="popover-id">Hello</button>
<section popover="" id="popover-id-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
</section>
</main-playground>