IE11 - vitejs

[mfo]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @webcomponents/template@1.5.0 for the project I'm working on.

My problem comes from a build with vite-js that does not transpile the polyfill (it was done using webpack). so a simple fix: remove usage of backticks

Here is the diff that solved my problem:

diff --git a/node_modules/@webcomponents/template/template.js b/node_modules/@webcomponents/template/template.js
index cebfac4..96e03e7 100644
--- a/node_modules/@webcomponents/template/template.js
+++ b/node_modules/@webcomponents/template/template.js
@@ -323,7 +323,7 @@
     var defineOuterHTML = function defineOuterHTML(obj) {
       Object.defineProperty(obj, 'outerHTML', {
         get: function () {
-          return `<${TEMPLATE_TAG}>${this.innerHTML}</${TEMPLATE_TAG}>`;
+          return "<" + TEMPLATE_TAG +">" + this.innerHTML + "</" + TEMPLATE_TAG + ">";
         },
         set: function (innerHTML) {
           if (this.parentNode) {

This issue body was partially generated by patch-package.

[romainmenke]

@bicknellr I already fixed this here : https://github.com/webcomponents/polyfills/pull/476 Could this PR get merged and released?

@mfo "@webcomponents/template": "^1.4.0", this version doesn't have this bug.

[bicknellr]

You should use @webcomponents/template/template.min.js instead (note the .min), that one's compiled down to ES5: https://github.com/webcomponents/polyfills/blob/ee1db33d70400c89f0c7255f78d889c9b8eb88a7/packages/template/gulpfile.js#L28