Polymer | Something a bit like an email client | Runtime Evironment library

There is a time frame between the construction of NavElement and the assignment of the chapters property where chapters is undefined. It might be safe to initialize chapters in the component itself rather than in Shell's until directive, or at least provide a fallback value in the template:

The goal of Lit, and of Polymer before it, is to help build web components and applications using browser features as much as possible.

For instance jQuery wrapped all the different browser features in it's own syntax, to the point where developers were learning jQuery, rather than Javascript. jQuery components assume that you have jQuery and rely on those jQuery methods to function.

Both Lit and Polymer championed web components - this makes each component much more self-contained. Using a mix of jQuery and any of its competitors was really painful, but that isn't the case here.

All the components used to build that shop are stable and still on npm. You can use them if you want and I have live applications that still use them.

However, championing the latest browser features has its risks. Polymer relied heavily on HTML Imports (that only Chrome ever implemented and were ultimately dropped) and its own template library. It was ultimately ported to ES6 modules, but the core design is far less suited to it. Those components are pretty stable, but you don't really want to start anything new with it.

Lit is quite a lot less opinionated than Polymer, and much lower level. For instance Polymer supported two way binding with {{property}} syntax, but had to make assumptions (that often broke) about what you were doing to support it. Lit drops that for extremely stable property setters but if you want to users to write values you have to subscribe to events and roll that yourself (Lit does make events very easy to manage though).

So if you're going to build your own web components or application Lit is by far the better choice, and LitElement is lightweight and extremely compatible with everything else. You can use those Polymer shop components in Lit (I have) but for most of them there are newer alternatives, in particular MWC.

Are you only running mvn azure-webapp:deploy?

Make sure you run mvn package first, or mvn package azure-webapp:deploy. Otherwise it will just re-deploy the same WAR file. Include the -Pproduction flag if you want to run it in production mode.

Edit:

I set up a project myself and could reproduce your issue. After running mvn azure-webapp:config again twice and updating both Application and Runtime, it seems to work.

This did two changes to the pom.xml, try these out:

1. Add war under in the azure-webapp-maven-plugin.
2. Change jre8 to TOMCAT 9.0.

My answer is going to be split between the code, some comments in the code, and text here.

First, the code:

If your default value of myBoolValue is false you can change your properties and template like this (If you want to use conditional templates you have to import @polymer/polymer/lib/elements/dom-if.js.)

The click event's target property is set to the topmost event target.

The topmost event target MUST be the element highest in the rendering order which is capable of being an event target.

Because a shadow DOM encapsulates its internal structure, the event is retargeted to the host element. In your example, the click event's target is retargeted to the custom-drop-down because that is the first and highest element capable of being a target.

If you need to target an element inside your custom element, you can take one of the following approaches:

1. Register an event listener inside your element.
2. Use the element to fill your custom element with elements that are declared in the light DOM.
3. Use the composedPath on events with composed: true to determine which internal element your event bubbled from.

Here's an example of the functionality I believe you are looking for. If you click on the Custom Element it toggles its active state (similar to toggling a dropdown). If you click on any other element on the page, the custom element deactivates itself (similar to hiding a dropdown when it loses focus).

The .contains method will work well for your usage. You can filter the products based on whether or not their categories or applications contain a selected item.

I also used a couple of other techniques from your original code, like using Set to filter out duplicate elements and your sorted method to put All at the top (I moved it to its own extension to be able to reuse it).

Is there a way to use these property bindings inside a React app with a prefixed "." or "?"

Short answer: no.

The first reason is that those syntaxes are lit-specific constructs that you can only use in its rendering context (inside the template of the WebComponent). The other bad news is that React's peculiar view of DOM and rendering make it one of the most WC-incompatible frameworks: you'll have to rely on attributes and refs to communicate with your web components, no property and event binding.

https://custom-elements-everywhere.com/#react

The first error is likely caused by being defined twice in the two versions. This is not avoidable since as of now custom elements are not un-definable (and thus re-definable with a different class). Removing the registration call as you tried doesn't solve the problem because the component would still be created using the original class.

The simplest solution would be to use a different tag name (even the Polymer docs you cited do this). If you really need the tag names to be the same then what I can suggest is to only replace some properties/methods of the original class. OpenWC and Modern Web testing guides have some parts (1, 2) dedicated to this.