lit / lit-element Goto Github PK

Is the stamp of a lit-html element faster then the stamp of a polymer element?

The demo in demo/lit-element.html doesn't work by default because ../lit-element.js refers to dependencies in ../../ instead of ./node_modules/

Using https://stackblitz.com/edit/lit-element-example-zzo6gh as an example, inspect The color variable is a comment rather than the expected color.

Odd. Is lit-element broken? Or can you not use variables inside component stylesheets?

See example: https://stackblitz.com/edit/lit-element-example-zzo6gh

Somehow the variables color and mood are mixed up.

In some of your examples, readme and demo, you have display: block, which is fine but, is it worth including hidden in these examples, just because it's good form?

<style>
  :host {display: block;}
  :host([hidden]) {display: none;}
</style>

https://developers.google.com/web/fundamentals/web-components/best-practices#add-a-host-display-style-that-respects-the-hidden-attribute

Is it planned for lit-element to support read-only properties?

I am following a controller as attribute pattern (coming from Angular world):

const DEFAULT_TEXT = 'This is the default Text';
export class ButtonController {
    constructor(public text, 
                public color, 
                public onClick: () => void) {
        
    }
    public reset() {
        this.text = DEFAULT_TEXT;
    }
}

export class ButtonComponent extends LitElement {
    static get properties() {
        return {
            ctrl: ButtonController
        };
    }
}
customElements.define('bk-button', ButtonComponent);

Any ideas on how can I pass an instance of ButtonController to <bk-button ctrl=btnCtrl></bk-button>.

I'm trying out Lit Element in a vanilla Angular 6 project and running into Uncaught TypeError: Class constructor LitElement cannot be invoked without 'new' when trying out the hello world lit element example. This commit shows how I added webcomponentjs / litelement packages, allow custom schema in angular, declare the my-element LitElement example, and then use that element in the app. That commit was made right after running the ng new command.

If you want to poke at it, run the following commands...

git clone https://github.com/rjsteinert/angular-with-lit-element.git
cd angular-with-list-element
npm install
npm start

I've been trying to use lit-element to render svg icons within a component, but found it strange to have to import svg from lit-html. I had some trouble getting the right version of both dependencies in sync so that rendering would work right.

I think it makes sense to import both rendering functions from the same place and not have to install a separate dependency with all the versioning headaches that causes.

I like the turn project took, and I suppose Redux is going to be mainstream in this area. And there is one thing that might improve the way LitElement works with Redux.

This idea is not unique, React also has it.

Now, in order pass a property down the hierarchy, each component needs to define it and pass over to its children

Better approach might be to have context properties that will be available for all affected scope/branch it will be applied.

I am not sure about implementation, but maybe scoped custom element registry and WeakMap might come in handy?

And it will be possible to have this sort of code

my-component-container.js

   import MyComponent from './my-component.js';

   const mapStateToProps = state => ({ someState: state.someState });
   const mapDispatchToProps = dispatch =>
            ({ doSomething: (value) => dispatch({ type: 'DO_SOMETHING', payload: value }) });

   export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

my-component.js

   ...
   export default class MyComponent extends LitElement {
        static get properties() {
            return {
               someState: String,
               doSomething: Function,
            };
        }
        _render({ someState, doSomething }) {
           return html`<input value=${someState} on-change=${doSomething}/>`;
       }
   };

connect.js

   export const connect = (mapStateToProps, mapDispatchToProps) => baseElement => {
       return class extends baseElement {
           connectedCallback() {
                const { store } = this.context;
                if (!store) {
                   throw new Error('no store passed over');
                }
                this.__storeUnsubscribe = store.subscribe(() => this._stateChanged(store.getState()));
                ....
           }

           disconnectedCallback() {
              if (this.__storeUnsubscribe) {
                  this.__storeUnsubscribe();
              }
               ...
           }
       }
   }

index.html

   <store-provider>
      <my-component></my-component>
   </store-provider>
   <script>
      import { createContext } from  '@polymer/lit-element';
      createContext('store-provider', { store: createStore() }));
   </script>

Justin suggested me to add a renderCallback to my lit-element as that allows people do add hooks pre and post rendering:

https://github.com/kenchris/lit-element#rendercallback

I suggest we could do the same here. I am willing to supply a PR

What is the recommended approach for retrieving instances of elements after they are instantiated?
My questions arises from the need of having configurable properties on classes/elements.
In some cases it is undesirable to specialize (using implementation inheritance) a class. Let us assume we only need to change one property or method in each sub class, in e.g:
class DataTable extends LitElement
class ProductDataTable extends DataTable
class UserDataTable extends DataTable

In this example all the tables have the same behavior except of how the data is fetched. If I could pass a custom fetch function to each DataTable my problem would be solved. Having access to the element instance of the DataTable this would be no issue. If I create an element by placing the custom HTML element tag in the DOM <data-table></data-table>, is the preferred way to query the element directly from the DOM (in e.g. document.querySelector())?

Or should I create an instance of the element programmatically and then insert it in the appropriate place?

const table = new DataTable(...);
table.fetch = getAllUsers; // Or pass it to the constructor as a dependency
document.body.appendChild(table);

Hi I'm noticing I'm constantly having to use the requestRender menthod because the components don't render when theres a change in the data. Is this normal?

Or tell me if there is anything you need help with :-)

https://github.com/kenchris/lit-element

We get a lot of questions about how elements should be constructed using LitElement and where and how to do various things.

We want to add a best practices document to the wiki here to address some of these questions and put forward some guidance about patterns to use.

So, I try to make something like this

some-element.js

<dom-repeat items="${cards}" as="item">
  <template>
    <dom-if if="${_isRoyal(item.type)}">
      <template>
        <p>The card is a Royal card!<p>
      </template>
    </dom-if>
  <template>
<dom-repeat>

...
_isActive(e) {
  console.log(e);
}
...

when I do that, the item inside <dom-if if="${_isRoyal(item.type)}"> is not defined.
and when I do this:

<dom-if if="[[_isRoyal(item.label)]]">

for the conditional part, console says that method '_isRoyal' not defined.
any help with this? thanks.

https://github.com/PolymerLabs/lit-element/blob/fdb3ba6b78253c9be4f4c2b917fa668af12d1c9c/src/%40polymer/lit-element.ts#L81

It would be great if we had a way to control if we want to use shadow dom like in polymer itself.

https://www.polymer-project.org/2.0/docs/devguide/dom-template#stamp-templates-in-light-dom - like here.

I'm expecting 2 way data binding to work similar to polymer templates but I can't get it to work.
For example using a <paper-toggle-button checked="${toggled}"> only works in one direction (reading, but not writing).

I have also tried <paper-toggle-button checked="[[${toggled}]]"> and <paper-toggle-button checked="[[toggled]]">

Hey! I've repurposed the start-polymer3 codebase and am trying to drop in lit-element.

What's the suggested way to bind the checked state of paper-checkbox with marsfarm-app's pie property?

import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { LitElement, html } from '@polymer/lit-element/lit-element.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/polymer/lib/elements/dom-if.js';
import '@polymer/paper-checkbox/paper-checkbox.js';

class MarsfarmApp extends LitElement {
  static get properties () {
    return {
      message: {
        type: String,
        value: ''
      },
      pie: {
        type: Boolean,
        value: false,
        observer: 'togglePie'
      },
      loadComplete: {
        type: Boolean,
        value: false
      }
    };
  }

  constructor() {
    // If you override the constructor, always call the 
    // superconstructor first.
    super();
    this.message = 'Hello World! I\'m a Polymer element :)';
  }

  ready(){
    // If you override ready, always call super.ready() first.
    super.ready();
    // Output the custom element's HTML tag to the browser console.
    // Open your browser's developer tools to view the output.
    console.log(this.tagName);
  }
  
  togglePie(){
    if(this.pie && !this.loadComplete) {
      // See https://developers.google.com/web/updates/2017/11/dynamic-import
      import('./lazy-element.js').then((LazyElement) => {
        console.log("LazyElement loaded");
      }).catch((reason) => {
        console.log("LazyElement failed to load", reason);
      });
      this.loadComplete = true;
    }
  }

  render() {
    return html`
      <h1>Start Polymer 3.0</h1>
      <p>${this.message}</p>
      <paper-checkbox 
        checked="{{pie}}">I like pie.</paper-checkbox>
      <template is="dom-if" if="${this.pie}">
        <lazy-element><p>lazy loading...</p></lazy-element>
      </template>
    `;
  }

}

// Register the element with the browser.
customElements.define('marsfarm-app', MarsfarmApp);

[edit: added syntax highlighting]

Will there be support for observers and computed properties as described in https://www.polymer-project.org/2.0/docs/devguide/observers? (They do not seem to be currently supported)

Such that assignees are automatically added to each pull request to ensure they are responded to in a reasonable timely manner.

Running a Firefox nightly build from 2018-04-29 2018-05-10, with anything that renders <tr> rows like this (repeat vs .map doesn't matter):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
</head>
<body>
  <script type="module">
    import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
    class MyElement extends LitElement {
      _render({ }) {
        return html`<style> .mood { color: green; } </style>
          Web Components are
          <table>
            <tbody>
              ${[ {one: 'dank', two: 'af'} ].map(item => html`
                <tr><td>${item.one}</td><td>${item.two}</td></tr>
              `)}
            </tbody>
          </table>
        `;
      }
    }
    customElements.define('my-element', MyElement);
  </script>
  <my-element></my-element>
</body>
</html>

Everything is fine with Shadow DOM (dom.webcomponents.shadowdom.enabled):

But with the polyfill / Shady DOM, the table rows / cells are gone, all text is dumped together into the tbody:

As a long-time user of Polymer, one of my biggest issues with Polymer.Element is it's hard buy-in with shadow dom. There is a method that you can overwrite to avoid creating a shadow root, but you really have to know what you're doing and then there are still issues around styling. Especially on browsers that need shady dom / css.

Shadow dom is a powerful tool and makes a lot of sense for building re-usable UI components. When building large complex applications, it is useful to split code up into separate components But in our experience, using shadow dom for all these private components has a lot of downsides. Closely associated components are unnecessarily isolated making tests more complicated, shared styles are duplicated many times over and especially on browser that do not have native shadow dom performance is negatively impacted. I think in the applications we build, over half our components do not need to use shadow dom.

The current support for elements without shadow dom is to overwrite _createRoot and return 'this'. I'm worried that this is not a very intuitive API and already requires some in-depth knowledge of how this works internally. I'm hoping that there can be more official support for creating elements without shadow dom and that it's use cases are covered by documentation, demos and tests. I'd be happy to contribute this where possible.

If using the attribute values in the style tag, the values of attributes are reassigned between each other. I created a simple demo: Stackblitz Demo

In the demo the relevant code looks like:

_render({top, left, animal, whales}) {
    return html`
      <style>
        :host {
          display: block;
          position:absolute;
          top: ${top}px;
          left: ${left}px;
        }
      </style>
      <h4>Type: ${animal}</h4>
      <div>Whales: ${'🐳'.repeat(whales)}</div>
      <p>Top: ${top}, Left: ${left}</p>
      <slot></slot>
    `;
  }

In Chrome it works but in Firefox animal and top, and whales and left will have changed values with each other. Removing top and left from style declaration makes the issue go away.

Please consider this element:

customElements.define('power-fab', class PowerFab extends LitElement {
  static get properties() {
    return {
      label: String,
      title: String,
      active: Boolean,
    };
  }

  toggleActive(event) {
    console.log(this.active); // false
    this.active = !!this.active;
    console.log(this.active); // false
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', event => this.toggleActive(event));
  }

  _propertiesChanged(currentProps, newProps, oldProps) {
    super._propertiesChanged(currentProps, newProps, oldProps);
    this.setAttribute('aria-label', newProps.title);
    newProps.active ? this.setAttribute('active', '') : this.removeAttribute('active');
  }

  render({label = '+', title, active}) {
    return html`
    <span>${label}</span>
    `;
  }
});

When I click on the element, console reports false false! meaning, I can't set a boolean attribute from the event listener.

When I inspect the element in dev tools and run $0.active = true, my attribute is applied however.

If this is PEBCAK, please refer me to documentation. Thanks

Currently we have some compile errors because we don't have typings for Polymer 3.0. Until we do we can just add some custom typings for the API surface we use.

cc @aomarks

On 0.1.1, it looks like a lit-element without any properties are not rendered at all. At least one property is required to trigger the render? Seems like a bug.

node_modules/@polymer/lit-element/lit-element.d.ts(14,46): error TS7016: Could not find a declaration file for module '@polymer/polymer/lib/mixins/properties-changed.js'. '/Users/shihn/work/guild/guild-web/node_modules/@polymer/polymer/lib/mixins/properties-changed.js' implicitly has an 'any' type. Trynpm install @types/polymer__polymerif it exists or add a new declaration (.d.ts) file containingdeclare module 'polymer__polymer';node_modules/@polymer/lit-element/lit-element.d.ts(15,44): error TS7016: Could not find a declaration file for module '@polymer/polymer/lib/mixins/properties-mixin.js'. '/Users/shihn/work/guild/guild-web/node_modules/@polymer/polymer/lib/mixins/properties-mixin.js' implicitly has an 'any' type. Trynpm install @types/polymer__polymerif it exists or add a new declaration (.d.ts) file containingdeclare module 'polymer__polymer';node_modules/@polymer/lit-element/lit-element.d.ts(17,46): error TS7016: Could not find a declaration file for module '@polymer/polymer/lib/mixins/properties-changed.js'. '/Users/shihn/work/guild/guild-web/node_modules/@polymer/polymer/lib/mixins/properties-changed.js' implicitly has an 'any' type. Trynpm install @types/polymer__polymerif it exists or add a new declaration (.d.ts) file containingdeclare module 'polymer__polymer';node_modules/@polymer/lit-element/lit-element.d.ts(18,44): error TS7016: Could not find a declaration file for module '@polymer/polymer/lib/mixins/properties-mixin.js'. '/Users/shihn/work/guild/guild-web/node_modules/@polymer/polymer/lib/mixins/properties-mixin.js' implicitly has an 'any' type.

Goes away if noImplicitAny is FALSE. I'd like it to be true in my projects - because typed

https://github.com/PolymerLabs/lit-element/blob/0fbfbf6fda05327cf7af6551c16806cb74f64d58/src/%40polymer/lit-element.ts#L133

Many existing Polymer elements use the (deprecated) @apply feature to style multiple custom properties. This mostly works with LitElement now, but you cannot have multiple style elements in different lit-html templates that try to style the same mixin. Here's an example.

This actually a ShadyCSS issue and this is just a tracking issue.

What's the reason for using the leading _ there?

NOTE, this occurs on any browsers that require ShadyCSS's css custom properties shim. This is currently only IE11 or older browser versions.

This is a limitation of lit-html's shady-render module. There is somewhat of a workaround, but it will only work correctly if the element has a style elements in one lit-html template, you will not be able to share styles in template parts with this workaround.

connectedCallback() {
  super.connectedCallback();
  if window.ShadyCSS) {
    window.ShadyCSS.styleElement(this);
  }
}

Since lit-element use unidirectional data binding, for ex: <p>${myprops}</p> . How do I get a data from a component which in its pattern use 2-way binding in LitElement? for example in routing <app-route/> component with PolymerElement

<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{pageRoute}}">
</app-route>

And the data is propagated (I dont exactly know how this works) to pageRoute.page,

<iron-pages selected="[[pageRoute.page]]" attr-for-selected="page-name" fallback-selection="fallback">
    <div page-name="test">Test</div>
    <div page-name="fallback">Not found</div>
</iron-pages>

Hi!

There is a way to use polymer 2 components inside a LitElement?

Before yesterday, using the importHref function from polymer 3, I used to be able to load html webcomponents, and load them inside the render() with a tag, but now, with this commit,
https://github.com/Polymer/polymer/commit/fd416a212ed725eef26d3b29bb624ed66669ad76
I am not able anymore to do that.

I have a scenario where I can't migrate polymer 2 components, but I have to use them, so I wonder if its possible to use polymer 2 components (html files) inside a litElement

This occurs because the check to constructor.properties value at https://github.com/Polymer/polymer/blob/master/lib/mixins/properties-mixin.js#L89

So I've been playing around with polymer for the first time in the last 2 days so I'm new to this framework but I'm very experienced with react... now I can't seem to find away to re-render the html no matter what I do. Also the methods this.set, this.notifyPath, this.push don't work.

here's what i'm working on stackblitz so you can tell me what am I do wrong
https://stackblitz.com/edit/lit-element-example-zkxtyl

We should make sure that handwritten accessors are fully supported, documented, and tested.

I assume this much works to delegate state to Polymer, but does it properly call render()?

class MyElement extends LitElement {
  get foo() { return this._getProperty('foo'); }
  set foo(v) { this._setProperty('foo'); }

  render() {
    return html`foo: ${this.foo}`;
  }
}

<a-thing with-property="Foo"></a-thing> with a property withProperty within class AThing extends LitElement does not reflect in the withProperty property.

Expected:
withProperty has value "Foo"

Actual:
withProperty is null

Glitch: Code, Demo

Maybe add them, I would like to continue to tdd

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 :)

I am sure this is an issue the Polymer team is aware of but I wanted to open this to make sure.

Using dom-if in a lit-element is not working as expected. For instance,

_render(props) {
  return html`
    <dom-if if="${props.shouldRenderThis}">
      <template>
        <mwc-button label="add" on-click="${_ => this.addFunction()}"></mwc-button>
      </template>
    </dom-if>
  `;
}

This will render and visually not broken, but if one clicks on the <mwc-button> the on-click event-listener is not triggered, therefore the addFunction is not called.

And lit-element doesn't really propose a solution, at least not a user-friendly one AFAIK. The work-around I am using right now is something similar to :

_render(props) {

  let addButton = html``;
  if (props.shouldRenderThis) {
    addButton = html`
      <mwc-button label="add" on-click="${_ => this.addFunction()}"></mwc-button>
    `;
  }

  return html`
    ${addButton}
  `;
}

Is there a better solution to create conditional templates in lit-element ? Or is there a working branch already trying to leverage this question ?

Thanks Polymer.

Right now lit-element is not compatible with mixins of elements which makes it close to impossible to use it in a production app since you cannot style elements as intended.

It would be great to get support for this soon so we can start using lit-element in production.

Experimenting with a lit-element I faced a problem that looks quite little but breaks the currently existing developer experience.

As a react developer I used to use any prop with any name because every props are encapsulated in props object inside a React component. But WebComponents are different. All properties are properties of a component itself, so there is a possibility of naming conflict. And the biggest one I have is conflict happened during implementation of render props approach.

It is a kind of convention in React world to use children or render property to implement this approach. I can use the following code:

class App extends React.Component {
  render() {
    return (
      <MyComponent>
        {(props) => <div {...props}/>}
      </MyComponent>
    );
  }
}

or

class App extends React.Component {
  render() {
    return (
      <MyComponent
        render={(props) => <div {...props}/>}
      />
    );
  }
}

The first approach is not applicable for WebComponents due to their implementation, but the second is fair enough. However, this is a point where naming conflict happens.

Due to a main method of lit-element with name render I am unable to provide the same property, so I have to change this property, destroying the previous user experience.

That's why this proposal exists. I would suggest to replace render method with renderCallback, as it was done for basic lifecycle methods of WebComponents (connectedCallback, disconnectedCallback, etc.). It would resolve the possibility of naming conflict and allow to use render property along with render method, and would look like following:

class MyComponent extends LitElement {
  static get is() {
    return 'my-component';
  }

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

  renderCallback({foo, render}) {
    return html`<div>${render(foo)}</div>`
  }
}

class App extends LitElement {
  renderCallback() {
    return html`<my-component
      render=${(foo) => html`<span>${foo}<span>`}
    ></my-component>`
  }
}

I think the same approach can be applied for other methods that can conflict with possible property names.

Another possible approach is to make these methods protected and start their names with underscore. They already are protected by design since the only purpose of them is to be called by parent class LitElement. So they could look like following:

class MyComponent extends LitElement {
  static get is() {
    return 'my-component';
  }

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

  _render({foo, render}) {
    return html`<div>${render(foo)}</div>`
  }
}

Thanks for the attention.

Consider this:

import { LitElement, html } from '@polymer/lit-element';
import '@polymer/iron-icon/iron-icon.js'; // 3.0.0-pre.12

const SharedStyles = html`<style>button {background: blue;}</style>`;
class MyApp extends LitElement {
  render() {
    return html`
    ${SharedStyles}
    <style>button {background: red;}</style>
    <button>Should be red</button>
    `;
  }
}

If you run the above you will see the SharedStyles style element is placed after the normal <style> element so button has background: blue instead of background: red.

Note that if you comment out Polymer3's iron-icon.js import then it works fine. Also this seems to start happening in 0.3.0 release which has ShadyCSS support.

cc @graynorton

Decorators similar to those in https://github.com/Polymer/polymer-decorators should work well with this base class. They can transform fields into accessors as described in #6.

How to get a specific child element by id. In the following example I would like to get the canvas child element in order to draw something on it:

class MyElement extends LitElement {

      _render() {
        return html`
            <canvas id="draw"></canvas>
        `;
      }

}

With Polymer elements I used to get the child element with this.$.draw but it's not working with LitElement. What is the workaround ?

I have created a repo with a small reproduction here. I'm not sure if this error is generally happening or I'm doing something wrong here (don't think so though).

Repro instructions and sample can be found here:
https://github.com/AndreasGalster/lit-css-prop-error

My app was working just fine until I've upgraded from lit-element 0.2 to 0.4, or 0.5

Expected Result:

App shell won't throw an error

Actual Result:

Lit-element breaks with a prop error:

Uncaught TypeError: Cannot read property '1' of null
    at new Template (lit-html.js:265)
    at eval (shady-render.js:34)
    at render (lit-html.js:129)
    at render (shady-render.js:40)
    at HTMLElement._applyRender (lit-element.js:190)
    at HTMLElement._propertiesChanged (lit-element.js:140)
    at HTMLElement._flushProperties (properties-changed.js:339)
    at HTMLElement._flushProperties (lit-element.js:150)
    at HTMLElement.ready (properties-changed.js:183)
    at HTMLElement.ready (lit-element.js:78)

It's a known issue in the README, but leaving this here :)