pwa-starter | Welcome to the PWABuilder pwa-starter! Looking to build a new Progressive Web App and not sure where | Web Framework library

Using the basic PWA Starter Kit as a base, if for example you wanted to store the shop state and the counter state but not the app state, you could do something like this:

Yes, you have to use LitElement's static styles which uses Constructible styles along with fallback for non-supporting browsers:

When you import from a path that is not relative, it'll look into the node_modules folder.

So here, it's just looking for the file ngsw-update.service here: node_modules/@ngsw/ngsw-update.service.

That's the most basic use case but you can only use that those kind of paths with files from your project by defining them into tsconfig.json (within compilerOptions.paths`, see that article for more: https://netbasal.com/sexier-imports-in-typescript-e3c645bdd3c6

As you mentioned, lit-element uses shadow dom by default as it has a lot of advantages when you're making reusable components.

However, you can opt out of it and use "light" dom which will render the component's content in the main dom which in turn will make that content accessible using things like document.getElementById() or document.querySelector()

Here's a minimum example of how to do use light dom in a lit-element-based component (and here's a glitch where you can see it in action)

Starting from the v5.2.0-beta1 we recommend using following Grid features:

• column helper elements (vaadin-grid-filter-column, vaadin-grid-sort-column)
• column convenience properties (path, header and text-align)
• renderers for more complex cases where you previously used templates

See the example here: https://glitch.com/edit/#!/lying-blanket?path=app.js:29:42 https://lying-blanket.glitch.me/

Note: I'm using fetch API here for simplicity only, you can use XHR if necessary.

The problems described above occurred as a result of bad dynamic importing. Somewhere else in my project I had two dynamic imports, where one of them was a parent of the other one. The "random" occurrance described above was the result of whether the first or the second import won the race (although why it resulted in the way it did is puzzling me).

This means I had to make sure import1 came before import2, which I simply solved with

Your polymer.json file doesn't include the information that the Polymer CLI uses to decide what to include in the build.

Adding the missing lines as per the PWA Starter Kit makes it work, for example: