search

jhildenbiddle / css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
https://jhildenbiddle.github.io/css-vars-ponyfill
MIT License
1.46k stars 64 forks source link

`fixKeyframes` throws error when using shadow DOM + legacy browsers #171

Closed mijelin closed 2 years ago

mijelin commented 2 years ago

When using web components / shadow DOM:

cssVars({
  rootElement: document.querySelector('custom-element').shadowRoot,
  onlyLegacy: false,
  variables: { /* ... */ }
});

// or
// cssVars({
//   rootElement: document.querySelector('custom-element'),
//   shadowDOM: true,
//   onlyLegacy: false,
//   variables: { /* ... */ }
// });

and the parsed styles contain keyframes rules, an error is thrown when performing the DOM update:

e.getElementsByTagName is not a function

@ https://github.com/jhildenbiddle/css-vars-ponyfill/blob/v2.4.7/src/index.js#L837

Reproduction: https://stackblitz.com/edit/typescript-xeedun?file=index.ts

jhildenbiddle commented 2 years ago

Fixed in 2.4.8