Intent to Ship: Convert adoptedStyleSheets to use ObservableArray

313 views
Skip to first unread message

Mason Freed

unread,
Nov 29, 2021, 4:40:51 PM11/29/21
to blink-dev

Contact emails

mas...@chromium.org

Explainer

https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Specification

https://www.w3.org/TR/cssom-1/#extensions-to-the-document-or-shadow-root-interface

Summary

The prior specification for adoptedStyleSheets used a FrozenArray backing array. The spec was recently changed, so that the backing array is an ObservableArray. This makes the API easier to use and understand, since it is a true mutable JS array object. For example, normal array operations such as adoptedStyleSheets.push(sheet) can be used.



Blink component

Blink

Search tags

adoptedStyleSheetsObservableArray

TAG review



TAG review status

Not applicable

Risks



Interoperability and Compatibility

Chromium is the only shipped implementation of adoptedStyleSheets. Gecko would like to ship this feature, but has been waiting for the resolution of this issue (FrozenArray vs. ObservableArray) to ship their implementation. This should unblock Gecko [1]. The Edge team supports this change [2]. WebKit continues to be skeptical [3] of this usefulness of this feature, despite the general agreement of the rest of the web components community [4], and the support of the developer community [5][6][7]. So the interop risk is mainly that WebKit decides not to implement this feature. Compat risks (from the change from FrozenArray to ObservableArray) should be minimal, as the same re-assignment semantics will continue to work. As documentation improves, and usage expands, we expect re-assignment usage to wane, and mutation (e.g. adoptedStyleSheets.push()) to expand. [1] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-834749590 [2] https://github.com/whatwg/webidl/issues/1027#issuecomment-940204556 [3] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-826036758 [4] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-825055766 [5] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-577941622 [6] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-827229881 [7] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-827234689



Gecko: Positive (https://github.com/whatwg/webidl/issues/1027#issuecomment-940204556)

WebKit: Negative (https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-826036758)

Web developers: Strongly positive Several large web component developers are strongly positive on this feature and change. See several links in the "Interoperability and Compatibility Risks" section.

Other signals:


Debuggability

This feature should remain debuggable via existing JS/devtools infrastructure. There is good support for adoptedStyleSheets already in devtools.



Is this feature fully tested by web-platform-tests?

Yes

Flag name

Because few compat risks are anticipated, and because it is relatively difficult to switch the representation (FrozenArray to ObservableArray) via a feature flag, this feature will be enabled by default. This will be done at the start of a new Chromium milestone (M99), and bugs will be monitored carefully in case any breakages are observed.


Requires code in //chrome?

False

Tracking bug

https://crbug.com/1236777

Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5638996492288000

This intent message was generated by Chrome Platform Status.

Chris Harrelson

unread,
Nov 29, 2021, 8:22:14 PM11/29/21
to Mason Freed, blink-dev
On Mon, Nov 29, 2021 at 1:40 PM Mason Freed <mas...@chromium.org> wrote:

Contact emails

mas...@chromium.org

Explainer

https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Specification

https://www.w3.org/TR/cssom-1/#extensions-to-the-document-or-shadow-root-interface

Summary

The prior specification for adoptedStyleSheets used a FrozenArray backing array. The spec was recently changed, so that the backing array is an ObservableArray. This makes the API easier to use and understand, since it is a true mutable JS array object. For example, normal array operations such as adoptedStyleSheets.push(sheet) can be used.



Blink component

Blink

Search tags

adoptedStyleSheetsObservableArray

TAG review



TAG review status

Not applicable

Was ObservableArray and its use in the web platform reviewed by the TAG? If not then I think it should be, as there are plans to use it in more places than just this.
 


Risks



Interoperability and Compatibility

Chromium is the only shipped implementation of adoptedStyleSheets. Gecko would like to ship this feature, but has been waiting for the resolution of this issue (FrozenArray vs. ObservableArray) to ship their implementation. This should unblock Gecko [1]. The Edge team supports this change [2]. WebKit continues to be skeptical [3] of this usefulness of this feature, despite the general agreement of the rest of the web components community [4], and the support of the developer community [5][6][7]. So the interop risk is mainly that WebKit decides not to implement this feature. Compat risks (from the change from FrozenArray to ObservableArray) should be minimal, as the same re-assignment semantics will continue to work. As documentation improves, and usage expands, we expect re-assignment usage to wane, and mutation (e.g. adoptedStyleSheets.push()) to expand. [1] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-834749590 [2] https://github.com/whatwg/webidl/issues/1027#issuecomment-940204556 [3] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-826036758 [4] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-825055766 [5] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-577941622 [6] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-827229881 [7] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-827234689


I appreciate your extensive efforts to achieve consensus and a good design. The result is in a spec and has broad consensus, which is great!
While those two links are not signals, I think it's:

* OK to not ask for a formal Gecko signal on this, if you can point to clear evidence they are implementing. Can you provide a link?

* OK to not ask for a formal webkit signal, given their negative signal on the public issues. Another one would be redundant and likely yield the same (negative) result.

Web developers: Strongly positive Several large web component developers are strongly positive on this feature and change. See several links in the "Interoperability and Compatibility Risks" section.

Other signals:


Debuggability

This feature should remain debuggable via existing JS/devtools infrastructure. There is good support for adoptedStyleSheets already in devtools.



Is this feature fully tested by web-platform-tests?

Yes

Flag name

Because few compat risks are anticipated, and because it is relatively difficult to switch the representation (FrozenArray to ObservableArray) via a feature flag, this feature will be enabled by default. This will be done at the start of a new Chromium milestone (M99), and bugs will be monitored carefully in case any breakages are observed.


Requires code in //chrome?

False

Tracking bug

https://crbug.com/1236777

Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5638996492288000

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAM%3DNeDijQpNhJJJUjtCzLSDrPngTHYY31H4oJrULxm%3DtxLVHew%40mail.gmail.com.

Mason Freed

unread,
Nov 30, 2021, 11:40:22 AM11/30/21
to Chris Harrelson, blink-dev
Thanks!

On Mon, Nov 29, 2021 at 5:22 PM Chris Harrelson <chri...@chromium.org> wrote:


On Mon, Nov 29, 2021 at 1:40 PM Mason Freed <mas...@chromium.org> wrote:


TAG review



TAG review status

Not applicable

Was ObservableArray and its use in the web platform reviewed by the TAG? If not then I think it should be, as there are plans to use it in more places than just this. 

No, it wasn't. This is a good suggestion - I'll open a TAG review for ObservableArray and this conversion of adoptedStyleSheets. There definitely are plans to expand its use on the platform.
 
 


Risks



Interoperability and Compatibility

Chromium is the only shipped implementation of adoptedStyleSheets. Gecko would like to ship this feature, but has been waiting for the resolution of this issue (FrozenArray vs. ObservableArray) to ship their implementation. This should unblock Gecko [1]. The Edge team supports this change [2]. WebKit continues to be skeptical [3] of this usefulness of this feature, despite the general agreement of the rest of the web components community [4], and the support of the developer community [5][6][7]. So the interop risk is mainly that WebKit decides not to implement this feature. Compat risks (from the change from FrozenArray to ObservableArray) should be minimal, as the same re-assignment semantics will continue to work. As documentation improves, and usage expands, we expect re-assignment usage to wane, and mutation (e.g. adoptedStyleSheets.push()) to expand. [1] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-834749590 [2] https://github.com/whatwg/webidl/issues/1027#issuecomment-940204556 [3] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-826036758 [4] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-825055766 [5] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-577941622 [6] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-827229881 [7] https://github.com/WICG/construct-stylesheets/issues/45#issuecomment-827234689


I appreciate your extensive efforts to achieve consensus and a good design. The result is in a spec and has broad consensus, which is great!

Thanks! It has definitely taken some time.
 

While those two links are not signals, I think it's:

* OK to not ask for a formal Gecko signal on this, if you can point to clear evidence they are implementing. Can you provide a link?

* OK to not ask for a formal webkit signal, given their negative signal on the public issues. Another one would be redundant and likely yield the same (negative) result.

I appreciate it. For Gecko, the main adoptedStyleSheets bug hasn't had any activity in some time, but I believe that's because the ObservableArray implementation is now blocking it. That bug has had regular recent activity, getting ObservableArray implemented.

Mason Freed

unread,
Dec 1, 2021, 1:09:08 PM12/1/21
to Chris Harrelson, blink-dev
On Tue, Nov 30, 2021 at 8:40 AM Mason Freed <mas...@chromium.org> wrote:
Was ObservableArray and its use in the web platform reviewed by the TAG? If not then I think it should be, as there are plans to use it in more places than just this. 

No, it wasn't. This is a good suggestion - I'll open a TAG review for ObservableArray and this conversion of adoptedStyleSheets. There definitely are plans to expand its use on the platform. 

TAG review filed

Camille Lamy

unread,
Dec 7, 2021, 11:04:02 AM12/7/21
to blink-dev, Mason Freed, blink-dev, Chris Harrelson
Hi Mason,

We reviewed this intent in the S&P review today, and we were not quite clear on the scope of the change. In particular, is it possible for cross-origin documents to share the adoptedStyelSheets? If so, can a style sheet used across cross-origin documents be modified and the modifications apply cross-origin as well? If so, this would be a security and privacy concern.

Thanks!
Camille

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Mason Freed

unread,
Dec 8, 2021, 6:49:55 PM12/8/21
to Camille Lamy, blink-dev, Chris Harrelson
Hi Camille,

Thanks for the question. I guess I have two points/questions:
1. That sounds like a general question about adoptedStyleSheets (which we shipped a few years ago), and isn't at all particular to the conversion from FrozenArray to ObservableArray. But did I miss something relevant about this change?
2. Can you help me understand how you'd go about sharing a single CSSStyleSheet between cross-origin documents? If you passed it around via postMessage, it'd be a (structured clone) copy, so it would no longer be shared. I agree that it'd be a (huge) privacy concern if this were possible, but I don't see how it could be done. I'm sure I'm missing something - perhaps give me more specifics and I'm happy to dig further.

Thanks,
Mason


To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Alex Russell

unread,
Dec 13, 2021, 7:03:42 PM12/13/21
to blink-dev, Mason Freed, blink-dev, Chris Harrelson, Camille Lamy
Thanks Mason, that matches my understanding of the situation too.

Can you please file an FYI with the TAG to let them know this new type is being put into use? It is often helpful for them to stay informed of new WebIDL primitives that they can suggest to others to help drive consistency.

Sending LGTM1 in the tool.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Mason Freed

unread,
Dec 13, 2021, 10:53:52 PM12/13/21
to Alex Russell, blink-dev, Chris Harrelson, Camille Lamy

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Camille Lamy

unread,
Dec 14, 2021, 10:05:21 AM12/14/21
to blink-dev, Mason Freed, blink-dev, Chris Harrelson, Camille Lamy, Alex Russell
Thanks Mason! I wasn't sure if it was possible to share it cross-origin, hence my question. If you can only get a non-shared copied version, then this is fine from a security POV.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Mike Taylor

unread,
Dec 14, 2021, 10:12:39 AM12/14/21
to Camille Lamy, blink-dev, Mason Freed, Chris Harrelson, Alex Russell
LGTM2
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/1544fa2d-29aa-475b-948d-e04208d8ebcdn%40chromium.org.


Yoav Weiss

unread,
Dec 14, 2021, 12:59:22 PM12/14/21
to Mike Taylor, Camille Lamy, blink-dev, Mason Freed, Chris Harrelson, Alex Russell
LGTM3

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAM%3DNeDijQpNhJJJUjtCzLSDrPngTHYY31H4oJrULxm%3DtxLVHew%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/1544fa2d-29aa-475b-948d-e04208d8ebcdn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Mason Freed

unread,
Dec 14, 2021, 1:13:18 PM12/14/21
to Yoav Weiss, Mike Taylor, Camille Lamy, blink-dev, Chris Harrelson, Alex Russell
Thanks everyone!

Joe Medley

unread,
Dec 21, 2021, 3:03:38 PM12/21/21
to blink-dev, mas...@chromium.org, mike...@chromium.org, cl...@chromium.org, blink-dev, Chris Harrelson, sligh...@chromium.org, yoav...@chromium.org
Is this on 98?

Yuki Shiino

unread,
Dec 23, 2021, 7:36:01 AM12/23/21
to Joe Medley, blink-dev, mas...@chromium.org, mike...@chromium.org, cl...@chromium.org, Chris Harrelson, sligh...@chromium.org, yoav...@chromium.org
2021年12月22日(水) 5:03 'Joe Medley' via blink-dev <blin...@chromium.org>:
Is this on 98?

No, not in M98.

says
"Commit e5b482af... initially landed in 99.0.4761.0"
so, I think this is in M99.


Mason Freed

unread,
Dec 24, 2021, 1:41:57 AM12/24/21
to Yuki Shiino, Chris Harrelson, Joe Medley, blink-dev, cl...@chromium.org, mike...@chromium.org, sligh...@chromium.org, yoav...@chromium.org
Right, M99. Thanks Yuki, and sorry for the delay.

Mike Taylor

unread,
Mar 21, 2022, 11:36:01 PM3/21/22
to 3D PRINTERS ONLINE STORE LTD, blink-dev, mas...@chromium.org, Chris Harrelson, Joe Medley, cl...@chromium.org, sligh...@chromium.org, yoav...@chromium.org, Yuki Shiino
Your site isn't using adoptedStyleSheets, so it seems unlikely. But we can continue conversation in the bug.

On 3/21/22 10:51 PM, 3D PRINTERS ONLINE STORE LTD wrote:
Possibly this change affects our website slider gallery images breaking on page load. 

3D PRINTERS ONLINE STORE LTD

unread,
Mar 22, 2022, 12:12:57 PM3/22/22
to blink-dev, mas...@chromium.org, Chris Harrelson, Joe Medley, blink-dev, cl...@chromium.org, mike...@chromium.org, sligh...@chromium.org, yoav...@chromium.org, Yuki Shiino
Possibly this change affects our website slider gallery images breaking on page load. 

On Friday, December 24, 2021 at 12:11:57 PM UTC+5:30 mas...@chromium.org wrote:
Reply all
Reply to author
Forward
0 new messages