Webpack : Lit Element new usage

Hi everyone, what’s up?

As Polymer 3 came out, I try to use it along with Webpack in order to ease my frontend logic, the problem is, if I try to “compile” the Polymer Lit Element with Webpack, I receive this error :

Here’s my element class :

import { LitElement, html } from '@polymer/lit-element';

class HomeComponent extends LitElement {

    static get properties() {
        return {
            foo: String,
        }
    }

    _render(props) {
        return html`
            <div>Hello From Polymer !</div>
        `;
    }
}

customElements.define('my-element', HomeComponent);

And here’s my Webpack configuration :

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning(Encore.isProduction())
    .enableTypeScriptLoader()
    .enableVueLoader()
    .enableSassLoader()
    .addLoader(
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'sass-loader',
                    options: {
                        importer: function(url, prev) {
                            if(url.indexOf('@material') === 0) {
                                const filePath = url.split('@material')[1];
                                const nodeModulePath = `./node_modules/@material/${filePath}`;
                                return {
                                    file: require('path').resolve(nodeModulePath)
                                };
                            }
                            return {
                                file: url
                            };
                        }
                    }
                }
            ]
        }
    )
    .addLoader(
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }
    )

    // Style
    .addStyleEntry('core', './assets/scss/public/core.scss')
    .addStyleEntry('registration', './assets/scss/public/registration.scss')

    // Javascript
    .addEntry('form', './assets/javascript/components/form.js')
    .addEntry('snackbar', './assets/javascript/components/form/snackbar.js')

    // PWA
    .addEntry('serviceWorker', './assets/javascript/pwa/app.js')
    .addEntry('sw', './assets/javascript/pwa/sw.js')

    // Vue
    .addEntry('vue', './assets/vue/public/index.js')

    // Polymer
    .addEntry('home', './assets/javascript/polymer/home.js')
;

module.exports = Encore.getWebpackConfig();

Information: Encore is a PHP/Symfony library, that’s just a wrapper around Webpack so the call stay easily the same.

Does anyone have more information about the Webpack usage with lit-Element ?

Thanks for the help 😃

[LarsDenBakker]

The webcomponents spec mandate that components are created as classes and the new operator is called. If you are transpiling to es5, the components are no longer classes and thus the browsers that implement native web components will complain.

The webcomponentsjs project contains an adapter to handle this: https://github.com/webcomponents/webcomponentsjs/blob/master/custom-elements-es5-adapter.js the polymer build tools add this adapter automatically, with webpack you’d need to add it yourself next to where you’re loading the polyfill. You just need to make sure you only add this adapter if you’re transpiling to es5.

[Guikingone]

@eskan Ok, just tried your configuration (using es2015) and my components is correctly instantiated and the DOM display the shadow-root element, really impressive trick, many thanks 😃.

@LarsDenBakker Maybe it could be a great idea to update the documentation and add a Webpack example ?