feat: Shadow DOM

[Marshal27]

@devknoll Created this PR based on your #53

impl containing the following:

• monkeypatch CSSStyleSheet.replace and CSSStyleSheet.replaceSync.
• associate the container descriptors with the CSSStyleSheet on shadowRoot.
• pass the set of query descriptors as part of the state/context.
• only monkeypatch CSSStyleSheet.replace and CSSStyleSheet.replaceSync if prototype function is defined.

pending:

• need to test/and or possibly implement support for ::slotted() and ::part()
• need to complete further testing with :host() (so far base level testing here of setting container-type seems to be working).

[Marshal27]

@devknoll I just realized you pushed a commit with some significant changes while I was working on this.

I will take a look at the new iteration.

[devknoll]

Apologies for the churn -- I was hoping to get those changes in before you rebased 🙂

[Marshal27]

Apologies for the churn -- I was hoping to get those changes in before you rebased 🙂

no problem at all, I welcome the feedback/interaction 😄

[devknoll]

#53 was merged, so you should be able to rebase against main now.

[Marshal27]

@devknoll if you are good with current impls, would you be ok with me rebasing and landing this on main and then handling any additional work for ::slotted() ::part() or :host() in a separate PR?

[Marshal27]

@devknoll this is ready for final review/merge when you have a moment to do another pass.

[devknoll]

Very sorry for the delay, I've been swamped with other things. Will review this today or tomorrow!

[Marshal27]

if you are good with current impls, would you be ok with me rebasing and landing this on main and then handling any additional work for ::slotted() ::part() or :host() in a separate PR?

@Marshal27 I'm not too keen on landing partial feature support. That said, I think enabling shadow roots at all may be a good incremental step, so I think I would be willing to land this if we deferred the :host and related changes (e.g. processCssRules), so that this PR was focused on just allowing you to use containers inside a shadow root that were defined inside that shadow root. The processCssRules change is going to need some further iteration anyway I think.

How does that sound?

I agree with you on not landing partial work, but, I also agree with your recommended approach to keep this focused on enabling containers in the shadowRoot etc. Based on recent dialog (#56 Support for non-trivial CSS Selectors) the processCssRules work will likely be driven by patterns adopted for that topic so it makes sense in my opinion to compartmentalize the processCssRules work.

[Marshal27]

@devknoll if you spot any additional items let me know and I will get them implemented... if not, it should be GTG.

[gkatsev]

Thanks for your work on this! Though, I'm wondering is this supposed to be with just a standard style element or only with Constructable Stylesheets?

I'm trying it out on a project where our existing web component templates include a style element inside of them, and with this PR it didn't work. Though, once I switched it to use constructable stylesheets it worked like a champ.

[Marshal27]

@gkatsev I appreciate you bringing that to my attention. The latest push should provide basic support for standard style elements; please give it a test drive and let me know how it goes.

Please note:

Attempting either of the following is not currently working for standard style elements, however, these two approaches are currently working for the constructed stylesheets.

Because that impl is currently under review by @devknoll I did not want to incorporate it here until I get his thoughts on the approach. Other than that, basic functionality should now be available.

:host { container-type: inline-size; }

or

:host[attribute] { container-type: inline-size; }

[gkatsev]

Awesome, let me try it out! I don't currently use :host with container queries, so, it's working out.

[gkatsev]

Seems to be working now without requiring us to adopt Constructable Stylesheets immediately. Thanks!

[gkatsev]

Thank you for the PR and for the maintainers for maintaining this polyfill. I hope this gets pulled in soon.

[devknoll]

@Marshal27 Thank you for all of your hard work on this PR. This is an important feature that many folks are passionate about, and one that I had hoped we'd be able to get in.

Unfortunately, I have moved on to other projects and there isn't currently anyone working full-time on the polyfill right now. Without an owner who can help see this full feature through to completion, we don't feel very comfortable merging this PR (or any other new features) right this moment. I'm very sorry about that ☹️

That said, I highly encourage you to continue development on your fork: there are clearly many folks that want this feature and you're best poised to provide it. For testing, the repository is configured to use BrowserStack. You should know that BrowserStack provides free sponsorship for OSS projects, and we encourage you to apply so that you can continue to test your changes against the official Web Platform Tests, which include tests for ShadowDOM support.

My sincere apologies ☹️

[Marshal27]

Posting this link here for posterity.

https://github.com/Marshal27/shadow-container-query-polyfill

[gkatsev]

Awesome, I was wondering whether you'd be willing to maintain a community fork @Marshal27.

[Marshal27]

Awesome, I was wondering whether you'd be willing to maintain a community fork @Marshal27.

I will definitely do my best. Feel free to add any shadow dom specific issues you may run into over there and I will do what I can.