Open Bug 1816327 Opened 10 months ago Updated 5 months ago

Cannot highlight multiple custom elements

Categories

(Core :: DOM: Selection, defect)

Product:
Core
Component:
DOM: Selection
Version:
Firefox 110
Type:
defect

Tracking

()

Tracking Flags:
Tracking Status
firefox-esr102 --- wontfix
firefox-esr115 --- affected
firefox115 --- wontfix
firefox116 --- wontfix
firefox117 --- affected

People

(Reporter: jonathonwoolston, Unassigned)

References

(Blocks 2 open bugs)

Details

Attachments

(2 files)

Screenshot 2023-02-12 at 11-34-29 LibUI testing.png
18.49 KB, image/png
Details
Reporter's testcase in comment#3
1.09 KB, text/html
Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0

Steps to reproduce:

I was creating a library to simplify the creation of custom components (I wanted to learn how to create a good library and this seemed like a great thing to create a library on, you can find the library on GitHub: https://github.com/Fighter178/libui), and when testing, I noticed that when two of the same custom elements were on the page, you could only highlight one of them.

Actual results:

When highlighting with the mouse, only one element's could be highlighted

Expected results:

When highlighting with the mouse, all of the text on the page should be highlighted when you mouse over all of it.

Should be "element's text" not "element's" in the actual resultss

Component: Untriaged → DOM: Selection
Product: Firefox → Core

I suspect it is because of shadow DOM.

Hi reporter, would it be possible to share the page that reproduce the issue with us? Thanks.

Flags: needinfo?(jonathonwoolston)

Sorry for the late reply.
I cannot find the source code for this. I do know that the components did use shadow DOM, and I'm pretty sure that it was closed shadow DOM, but can't be certain.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        class ShadowComponent extends HTMLElement {
            constructor(){
                super();
                const shadow = this.attachShadow({mode:"open"});
                const text = document.createElement("p");
                text.textContent = "Highlight me (shadow)!";
                shadow.append(text);
            }
        };
        class RegularComponent extends HTMLElement {
            constructor(){
                super();
            }
        }
        customElements.define("my-shadow", ShadowComponent);
        customElements.define("my-regular", RegularComponent);
    </script>
</head>
<body>
    <h2>Shadow DOM:</h2>
    <my-shadow></my-shadow>
    <my-shadow></my-shadow>
    <h2>Regular:</h2>
    <my-regular>
        <p>Highlight me (regular)!</p>
    </my-regular>
    <my-regular>
        <p>Highlight me (regular)!</p>
    </my-regular>
</body>
</html>

You can only highlight one element at a time.

Flags: needinfo?(jonathonwoolston)

The example that I provided does work too. In Firefox 115.0

I can reproduce the issue

Status: UNCONFIRMED → NEW
status-firefox115: --- → wontfix
status-firefox116: --- → affected
status-firefox117: --- → affected
status-firefox-esr102: --- → affected
status-firefox-esr115: --- → affected
Ever confirmed: true
Blocks: webcomponents
Blocks: shadowdom

Also, can confirm that it also effects mobile.

Tested on mobile Firefox v115.2

Also, you cannot highlight from native elements to shadow dom'ed ones either. Or from shadow dom elements to native

OS: Unspecified → All
Hardware: Unspecified → All

Sounds a duplicate of bug 1455893?

Severity: -- → S3

Also, this affects ctrl+a too, and shadow DOM elements cannot be selected with it, even if your cursor is in/clicked into one, it will only select native or non-shadow DOM elements.

You need to log in before you can comment on or make changes to this bug.