Cannot highlight multiple custom elements
Categories
(Core :: DOM: Selection, defect)
Tracking
()
People
(Reporter: jonathonwoolston, Unassigned)
References
(Blocks 2 open bugs)
Details
Attachments
(2 files)
Screenshot 2023-02-12 at 11-34-29 LibUI testing.png
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
|
||
Updated•1 year ago
|
|
||
Comment 2•1 year ago
|
||
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.
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.
The example that I provided does work too. In Firefox 115.0
|
|
||
Comment 5•1 year ago
|
||
|
|
||
Comment 6•1 year ago
|
||
I can reproduce the issue
|
|
||
Updated•1 year ago
|
Also, you cannot highlight from native elements to shadow dom'ed ones either. Or from shadow dom elements to native
|
|
||
Updated•1 year ago
|
|
||
Comment 10•1 year ago
|
||
Sounds a duplicate of bug 1455893?
|
|
||
Updated•1 year ago
|
|
||
Updated•1 year ago
|
|
Reporter | |
Comment 11•1 year ago
|
||
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.
Description
•