Lit Elements on Wordpress #2139
-
|
@hasanirogers proposed to use lit element to build SPA Wordpress themes. It was a really good idea in my opinion so I wanted to try it too. This prompts my question - how do you use Lit Element and Polyfills using WordPress? The difficulty is that the polyfills suggested by Lit Element transpile javascript onto HTML - not javascript onto javascript. The suggested route in the blog is to use a ES5 transpiler. I think this makes sense, however you are also requiring modern browsers to run ES5 code - further, modern browsers are loading in polyfills, and legacy browsers are loading in things like prefixes. Typically you do targeting to solve this problem. So my thinking is the answer would go something like.
But there are some shortcomings to my answer because essentially you would be dynamically loading javascript (not advised) after running the client test, which would come after preload and this would defeat the quick load times of LitElement. This would probably even be slower than just loading in the babel polyfills initially. What do you think would be the best route to load polyfills in this situation. Further, if the Lit Element devs are reading this your old advice on this topic was really helpful - what things do you think have changed since these docs? Best, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Not quite sure I understand what you mean here, do you mind elaborating a bit or pointing out where in the doc that information is presented? If I am understanding your post correct though, I think what you're looking for actually spans a couple distinct, but related topics / steps. Polyfills should typically come first and should be unbundled (minified is fine) and follow the pattern of feature detection / progressive enhancement. If the browser supports something like For bundling, a common technique to apply here is called differential loading, which as you point is effectively creating two versions of your app code, one for modern browsers and one for legacy browsers. Typically the cutoff here is done along the lines of the introduction of ESM to HTML. Basically, if the browser understands <script type="module" src="main.js"></script>
<script nomodule src="main.bundle.js" defer></script>So all together, your index.html might look something like this <html>
<head>
<script src="webcomponents-loader.js"></script>
<script type="module" src="main.js"></script>
<script nomodule src="main.es5.js" defer></script>
</head>
<body>
<h1>Welcome!</h1>
<my-component></my-component>
</body>
</html>
Hope that helps! ✌️ |
Beta Was this translation helpful? Give feedback.
-
|
Thank you this has been a very helpful response - in the end, I did as the comment at the bottom suggests. |
Beta Was this translation helpful? Give feedback.
Not quite sure I understand what you mean here, do you mind elaborating a bit or pointing out where in the doc that information is presented?
If I am understanding your post correct though, I think what you're looking for actually spans a couple distinct, but related topics / steps.
Polyfills should typically come first and should be unbundled (minified is fine) and follow the pattern of feature detection / progressive enhancement. If the browser supports something like
window.customElementsthen don't do anything, otherwise, load up that functionality. webcomp…