Selection APIs for Shadow DOM

[hayatoito]

Title: [Shadow]: Find a way for selection to work across shadow DOM subtrees (bugzilla: 15444)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444

---

comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c0
Dimitri Glazkov wrote on 2012-01-06 18:40:35 +0000.

As specified in http://dvcs.w3.org/hg/webcomponents/rev/3fb19f98bead, window.getSelection() may never retrieve content from shadow DOM subtrees. Also, a user can't select content from both document tree and shadow DOM tree. We must fix that somehow.

---

comment: 1
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c1
Dimitri Glazkov wrote on 2012-01-06 20:29:06 +0000.

Should we allow shadow DOM subtrees to specify whether they want to be treated as part of "as-rendered" structure or as a separate subtree?

Currently, for getSelection(), the WebKit implementation returns serialized value of the Selection object inside of a shadow DOM subtree, but node values are adjusted to avoid leaking shadow DOM nodes.

---

comment: 2
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c2
Steve Orvell wrote on 2013-09-05 01:50:34 +0000.

This is an important UX concern. I think it's fine to limit access to selection data as defined by the spec. However, users expect to be able to select and copy text in a web page. To have that limited by invisible ShadowDOM boundaries would be very annoying. Ideally, this just always works and is separate from the encapsulation provided via ShadowDOM.

---

comment: 3
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c3
Dimitri Glazkov wrote on 2014-03-06 00:11:06 +0000.

One thing that Jonas suggested at the recent spec review is to make our selection language non-normative. It's a tough subject, so we shouldn't freeze this into the spec. The suggestion was to have the language along these lines:

"Selection is not defined. Implementation should do their best to do what's best for them. Here's one possible, admittedly naive way: <insert current normative wording, but make it informative>"

---

comment: 4
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c4
Hayato Ito wrote on 2014-03-10 06:09:43 +0000.

(In reply to Dimitri Glazkov from comment #3)

One thing that Jonas suggested at the recent spec review is to make our
selection language non-normative. It's a tough subject, so we shouldn't
freeze this into the spec. The suggestion was to have the language along
these lines:

"Selection is not defined. Implementation should do their best to do what's
best for them. Here's one possible, admittedly naive way: <insert current
normative wording, but make it informative>"

Done at
25bd518.

I'll keep this bug open until we have a better model, that is a tough issue for us.

---

comment: 5
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c5
Dimitri Glazkov wrote on 2014-03-10 16:07:28 +0000.

(In reply to Hayato Ito from comment #4)

(In reply to Dimitri Glazkov from comment #3)

One thing that Jonas suggested at the recent spec review is to make our
selection language non-normative. It's a tough subject, so we shouldn't
freeze this into the spec. The suggestion was to have the language along
these lines:

"Selection is not defined. Implementation should do their best to do what's
best for them. Here's one possible, admittedly naive way: <insert current
normative wording, but make it informative>"

Done at
https://github.com/w3c/webcomponents/commit/
25bd518.

I'll keep this bug open until we have a better model, that is a tough issue
for us.

Maybe kill the 6.1.1 section title and remove the musty language from the non-normative parts?

---

comment: 6
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c6
Hayato Ito wrote on 2014-03-11 07:45:41 +0000.

(In reply to Dimitri Glazkov from comment #5)

Maybe kill the 6.1.1 section title and remove the musty language from the
non-normative parts?

Sure. Done at
0887618

---

comment: 7
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c7
Hayato Ito wrote on 2014-11-19 05:06:12 +0000.

*** Bug 25038 has been marked as a duplicate of this bug. ***

---

comment: 8
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15444#c8
Hayato Ito wrote on 2015-04-22 21:31:06 +0000.

Status Update: This bug is still on our radar, but we couldn't spend much time on this issue in terms of the spec.

FYI. In Blink, we are working on supporting selection across shadow boundaries 1. However, there is no update on API in the spec yet.

[yoichio]

I proposed updating Selection API for Shadow in TPAC:
https://github.com/yoichio/public-documents/blob/master/selectionapiforshadow.md
Discussion log:
https://www.w3.org/2017/11/10-webplat-minutes.html#item05

@smaug----, do you have any opinion?

[annevk]

I suspect @rniwa is also interested in this as I believe he was working on the Selection API last.

(It's encouraging to read that it attempts to preserve the encapsulation boundary.)

[TakayoshiKochi]

@yoichio and @rniwa (and others) discussed the topic off-meeting-room, which is not captured in the meeting notes. In a nutshell, I understand @rniwa's idea is to preserve the both ends of selection via opaque handles to point somewhere in the whole tree, not explicit node + offset pairs. Lots of details to be fleshed out, but sounded a feasible idea.

[rniwa]

Basically, the idea is to provide a mechanism to refer to a specific position within a shadow DOM with a mechanism that can be also used to refer to a specific position in pseudo element, SVG use element's shadow tree, etc...

It's probably sensible to introduce an interface on ShadowRoot to see the boundary points within a specific shadow tree but that shouldn't be Selection interface since that interface has a bunch of methods like collapse and extend which don't make sense to have it for every shadow root.

We also discussed that we need a mechanism to pick a mode between having a separate selection & having a selection that's shared with the parent tree. e.g. if you're creating an editor, you may want to have its own selection whereas if you're just an article, you probably want the selection to be shared with the rest of the document.

[TakayoshiKochi]

Also discussed there that saving / restoring selection states (ie. serializable selection) was the biggest request from web-based editor authors.

[smaug----]

How would serializable selection work with closed ShadowRoots? I guess some proposal will explain that?

[rniwa]

So the idea is to use (shadowHost, position identifier) pair for selection start & end where position identifier is an author-script defined location within each shadow tree. If a position lies within another shadow tree, then the identifier (some integer) should be able to distinguish any selection end points within the inner shadow tree (recursively).

For pseudo element, textarea, input, SVG use element, etc... UA defines this identifier (probably needs to be spec'ed).

[web-padawan]

Recently did some research on practical aspects while trying to get a WYSIWYG editor working in Shadow DOM, submitted the report to the polyfill repo: https://github.com/webcomponents/shadydom/issues/113#issuecomment-427066346

Hope to see some progress on this topic after F2F in October.

[aadamsx]

You'll find an example of it not working here: https://github.com/ckeditor/ckeditor5-engine/issues/692#issuecomment-427027745

[yoichio]

Thank you for investigation! Pain points from web authors are great motivation for us to move this forward:)

[yoichio]

I wrote up new ComposedSelection API Explainer: http://bit.ly/2yPAd5h.
I'm going to propose this on this TPAC next week.
Any comment, especially from web developers, is welcome(you also can comment on the doc).

[rniwa]

Rough consensus at TPAC F2F:

• Add getComposedRange, which takes a list of closed trees, to Selection.
• Instead of adding a new setBaseAndExtent variant, update the existing methods to support setting selection which crosses shadow boundaries.

Action Item: Figure out what happens to each method in Selection.

[smaug----]

and getComposedRange would return a StaticRange

[mfreed7]

So from the last triage meeting, it sounds like there's roughly general agreement on the shape of the proposal. The next step is to put up some spec PRs to implement it. If someone would like to do that, great, please let me know! Otherwise our plan is to try to tackle this in early to mid 2022.

[mfreed7]

FYI, the TAG just concluded their design review of the new design, and they said they were reasonably happy with the shape.

They did raise one question:

One thing we wondered about: once this is implemented are there any remaining use cases for getRangeAt()? It seems that the new method covers all of them, and since it returns a static range it's more performant and less error-prone. If that assumption is correct, would it make sense to deprecate getRangeAt() and name the new method in a more generic way (e.g. getRange())?

It seems like a reasonable question. I believe getComposedRange() should be usable for all use cases, including any covered by getRangeAt(). Perhaps we should rename and deprecate as they recommend?

[smaug----]

getComposedRange does not cover all the cases. getRangeAt is handy when modifying the range.

[mfreed7]

getComposedRange does not cover all the cases. getRangeAt is handy when modifying the range.

Yeah, that's a good point. getComposedRange() is good for all of the "read only" use cases, but not the mutation ones.

[annevk]

There's now a draft in https://w3c.github.io/selection-api/#dom-selection-getcomposedrange and a feedback thread at w3c/selection-api#161.

Shall we move discussion there or is there a good reason to keep this open?

[mfreed7]

There's now a draft in https://w3c.github.io/selection-api/#dom-selection-getcomposedrange and a feedback thread at w3c/selection-api#161.

Shall we move discussion there or is there a good reason to keep this open?

Sounds reasonable to close this and continue the discussion there.