search

webcomponents / polyfills

Web Components Polyfills
BSD 3-Clause "New" or "Revised" License
1.13k stars 165 forks source link

[ShadyCSS] css-vars-ponyfill compatibility #197

Open jhildenbiddle opened 4 years ago

jhildenbiddle commented 4 years ago

Author of css-vars-ponyfill here. I'm following up on an issue filed by @lamianbu regarding compatibility with lit-element which I believe is an issue related to ShadyCSS.

Description

lit-element is not compatible with css-vars-ponyfill.

Details

According to the ScopingShim section of the ShadyCSS docs, CSS custom property values are transformed to static (i.e. "realized") values before <style> and custom elements are appended to the DOM.

Additionally, if CSS Custom Properties is not detected, ScopingShim will replace CSS Custom Property usage with realized values.

The end result is that the custom property declarations and var() functions used in the lit-element source are not available in the DOM, so libraries like css-vars-ponyfill have nothing to process. Curiously, this transformation happens by default when using lit-element, but not when using the web component polyfills on their own even though both libraries make use of ShadyCSS.

Questions / Possible Solutions

Is there a way to disable the CSS custom property transformation in ShadyCSS/ScopingShim so that developers can use css-vars-ponyfill instead if they prefer? The main advantage of doing so is the ability to update custom property values on the client.

Live Demo

These demos are intended to show a standard web component + polyfills working with css-vars-ponyfill, where the lit-element version does not. As described above, the issue with the lit-element demo is that there are no custom properties in the DOM for css-vars-ponyfill to process (they have already been transformed to static values by ScopingShim).

Steps to Reproduce

Tip: If possible, test with Chrome 48. This version lacks native custom property support so legacy behavior can be tested while still providing decent dev tools for inspecting/troubleshooting.

  1. Load the web component demo.
  2. Use dev tools to inspect the <my-element> element. Notice how the original <style> element with CSS custom properties is rendered within the DOM, and css-vars-ponyfill has appended a second <style> element with transformed custom property values.
  3. Load the lit-element demo.
  4. Use dev tools to inspect the <head> element. Notice that a new <style scope="my-element-1"> element has been added with custom property values transformed to static values.
  5. Use dev tools to inspect the <my-element> element. Notice that the element no longer contains the original CSS custom property declarations or var() functions defined in the lit-element's JavaScript source.

Expected Results

Custom property declarations and values will be rendered to the DOM as defined in the lit-element (similar to how standard web component polyfill works)

Actual Results

See above

Browsers Affected

All legacy versions of:

jhildenbiddle commented 4 years ago

Bump? @azakus? @sorvell?

Thx!

aomarks commented 3 years ago

If you were using ShadyCSS, but with CSS custom property transformation disabled, then I'm still not sure a polyfill like https://github.com/jhildenbiddle/css-vars-ponyfill would work, because the ScopingShim part of ShadyCSS transforms and hoists <style> tags from shadow roots to the <head>. Another CSS custom property polyfill wouldn't find <style> tags in the normal expected places, it would have to have special compatibility with ShadyCSS.

By the way, if you use ShadyCSS on Edge, and then force-enable css-vars-ponyfill, you should be able to simulate the effect you're asking for, because ShadyCSS should detect that Custom Properties are natively available in Edge, and will enable the Scoping Shim but not the Custom Property shim.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

tug-guenter commented 2 years ago

Is this handling for the ShadowDOM already fixed (somehow somewhere)?

I'm working on an application based on Lit 2.x using css-vars-ponyfill and @webcomponents/webcomponentsjs. Some parts are dynamically generated and style properties are being ignored (in my case it would be the background-color). Importing polyfill-support.js from lit in my index.html also does not work for this.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.