How to make custom web components work in ie11 using Parcel v2 and Babel?

[VelynnXV]

I have a simple app using parcel v2 along with Babel and i want to make it compatible with ie11. The problem i am currently facing is a JS error Function.prototype.toString: 'this' is not a Function object related to my custom class extending HTMLElement.

Is it even possible to make it work in IE11? What plugin should i use to correct the problem and how can i include them in .babelrc / package.json ?

I tried to use @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js (I load it in my index.html) without any results.

My source code :https://github.com/VelynnXV/Front-End-Workflow

.babelrc

{
  "presets": ["@parcel/babel-preset-env"],
  "plugins": ["@parcel/babel-plugin-transform-runtime"]
}

package.json

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "This is my package, using Parcel. Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.",
  "app": "public/index.html",
  "scripts": {
    "dev": "npm run clean && parcel public/index.html --dist-dir development -p 3000",
    "build": "rimraf ./dist && parcel build public/*.html --dist-dir dist --public-url ./",
    "clean": "rimraf ./development && rimraf ./.parcel-cache"
  },
  "browserslist": "IE 11",
  "author": "velynn",
  "license": "UNLICENSED",
  "devDependencies": {
    "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823",
    "@parcel/babel-preset-env": "^2.0.0-alpha.3",
    "@parcel/optimizer-cssnano": "^2.0.0-nightly.598",
    "@parcel/optimizer-htmlnano": "^2.0.0-nightly.598",
    "@parcel/packager-css": "^2.0.0-nightly.598",
    "@parcel/packager-html": "^2.0.0-nightly.598",
    "@parcel/transformer-css": "^2.0.0-nightly.598",
    "@parcel/transformer-html": "^2.0.0-nightly.598",
    "@parcel/transformer-inline-string": "^2.0.0-nightly.598",
    "@parcel/transformer-postcss": "^2.0.0-nightly.598",
    "@parcel/transformer-posthtml": "^2.0.0-nightly.598",
    "@parcel/transformer-sass": "^2.0.0-nightly.598",
    "@webcomponents/webcomponentsjs": "^2.5.0",
    "parcel": "^2.0.0-beta.1",
    "postcss": "^8.2.6",
    "sass": "^1.32.7"
  },
  "dependencies": {}
}

my component

// how do i include sass in template
import mystyle from "bundle-text:../scss/animeCardStyle.scss";

const template = document.createElement('template');
template.innerHTML = `
    <div class="anime-card">
    <div>
        <img />
        <h3></h3>
        <div class="info">
            <p>
                <slot name="anime-description" >
            </p>
        </div>
    </div>
    </div>
`;

class AnimeCard extends HTMLElement{
    constructor(){
        super() // calling the constuctor of HTMLElement

        // ShadowDom
            //An important aspect of web components is encapsulation
            //being able to keep the markup structure, style, and behavior hidden and separate
            //from other code on the page so that different parts do not clash, and the code can 
            //be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to 
            //attach a hidden separated DOM to an element

        let shadow = this.attachShadow({ mode: "open" });
        let style = document.createElement("style");
        style.textContent = mystyle;
        shadow.appendChild(style);

        this.shadowRoot.appendChild(template.content.cloneNode(true))
        this.shadowRoot.querySelector('h3').innerHTML = this.getAttribute('anime-title')
        this.shadowRoot.querySelector('img').src = this.getAttribute('avatar')
        this.shadowRoot.querySelector('img').width = "300"

    }

    // Custom element lifecycle methods

    // constructor() : Called when an instance of the element is created or upgraded
    // connectedCallback() : Called everytime an element is inserted in DOM -> useful for setting event listeners
    // disconnectedCallback() : Called everytime an element is removed from DOM
    // attributeChangedCallback(attrName,oldValue,newValue) : Called when an attribute is added, removed, upgraded or replaced.
    something() {
        
      }

    // connectedCallback() {
    //     this.shadowRoot.querySelector('#elem').addEventListener('click', () => this.something());
    //   }
    
    //   disconnectedCallback() {
    //     this.shadowRoot.querySelector('#elem').removeEventListener();
    //   }
}
window.customElements.define('anime-card',AnimeCard)


const animeCard = async () => {

    let response = await fetch('https://kitsu.io/api/edge/anime').then(function (res) {
        return res.json()
    });

    let animes = response
    console.log(animes.data)


    let template = "";

    for (let index = 0; index < animes.data.length; index++) {
        let anime = animes.data[index];

        let anime_img = '';
        if (anime.attributes.coverImage != null) {
            anime_img = anime.attributes.coverImage.original;
        }
        let anime_title = '';
        if (anime.attributes.coverImage != null) {
            anime_title = anime.attributes.canonicalTitle;
        }
        let anime_description = '';
        if (anime.attributes.coverImage != null) {
            anime_description = anime.attributes.description;
        }

        template += `
                <anime-card avatar="${anime_img}" anime-title="${anime_title}">
                    <div slot="anime-description">${anime_description}</div>
                </anime-card>           
            `

    }

    return template
}

export default animeCard

[stale[bot]]

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.