Skip to content

popovertarget attribute not treated as id-referencing attribute #5340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
gaurav-rk9 opened this issue Apr 21, 2025 · 1 comment · Fixed by #5357
Closed

popovertarget attribute not treated as id-referencing attribute #5340

gaurav-rk9 opened this issue Apr 21, 2025 · 1 comment · Fixed by #5357
Labels
BUG P3

Comments

@gaurav-rk9
Copy link
Contributor

gaurav-rk9 commented Apr 21, 2025 •
edited
Loading

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>
@wjhsf wjhsf added the BUG P3 label May 2, 2025
@git2gus Git2Gus
Copy link

git2gus bot commented May 2, 2025

This issue has been linked to a new work item: W-18425406

@wjhsf wjhsf mentioned this issue May 2, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
BUG P3
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: make it pop! (over) @W-18425406 salesforce/lwc
2 participants
@wjhsf @gaurav-rk9