It appears that in Firefox shadow root text contents are not user-selectable like any other text on the page.
Demo: execute the snippet below and press Ctrl + A in the result frame. Here's what happens:
let wShadow = document.querySelector('#with-shadow-root')
let p = document.createElement('p')
p.textContent = 'With shadow root'
wShadow.attachShadow({ mode: 'open' })
wShadow.shadowRoot.appendChild(p)
<div>
Some text.
<p id="with-shadow-root"></p>
Some more text.
</div>
<div>
Some text.
<p>Without shadow root.</p>
Some more text.
</div>
I wish the With shadow root text fragment to be selected as well.
How to make this work in Firefox? Is there some CSS property that controls this behavior?
Bonus question: is Firefox behaving correctly here as per the spec? Or is it a bug? (I can't find any bug about this in Bugzilla).
I tried setting display to inline and the user-select
CSS property to no avail.
Just to show the same also happens with custom elements, in both shadow modes:
class MyPOpen extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: 'open'
});
this.text = document.createTextNode('With open shadow root');
}
connectedCallback() {
this.shadowRoot.appendChild(this.text);
}
}
customElements.define('my-p-closed', MyPOpen);
class MyPClosed extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({
mode: 'closed'
});
this.text = document.createTextNode('With closed shadow root');
}
connectedCallback() {
this.shadow.appendChild(this.text);
}
}
customElements.define('my-p-open', MyPClosed);
my-p-open, my-p-closed { display: block; }
<div>
Some text.
<my-p-open></my-p-open>
<my-p-closed></my-p-closed>
Some more text.
</div>
<div>
Some text.
<p>Without shadow root.</p>
Some more text.
</div>
The bug report I filed in reaction to the findings in this question has been closed as a duplicate of this bug.
The last comments on that 2nd bug report are shedding some light on this:
Q: Too late for a fix in 70 but as we're seeing some duplicates, could you take another look and maybe aim for a fix in 72? Or is this part of some bigger project?
A: Implementing different Selection handling when Shadow DOM is enabled is a massive task, and that work is ongoing. (Selection handling with Shadow DOM isn't really specified)
So to answer your question, by the looks of it text selection handling in conjunction with shadow DOM seems to be a) unspecified territory, and b) kind of difficult to implement.
At least there's agreement on that the current handling in Firefox is not what they want it to be.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With