All paths are relative to the project root, e.g. where the pom.xml file is located in a Maven project. JavaScript imported using @JsModule uses strict mode. Among other things, this means that global variables must be defined on the window object, window.x = …, instead of just x = …. Vaadin 14 with npm Non-Spring … Read more
As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors: say your common styles are in a file called common-style.css In your component have a style tag that is like this @import url( ‘/common-style.css’ ); This inverts the control : instead of broadcasting your styles for anyone to use, style … Read more
The polymer-cli created apps came with assumption of serving from root level “https://stackoverflow.com/”. In generated project index.html you will find two comments <!– The `<base>` tag below is present to support two advanced deployment options: 1) Differential serving. 2) Serving from a non-root path. Instead of manually editing the `<base>` tag yourself, you should generally … Read more
Polymer element <iron-meta> is also an option. For me this was the easiest solution.
You’re not the first to ask this question 🙂 Let me clarify a couple of things before getting to your questions. Polymer’s webcomponents.js is a library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella. These are: Custom Elements HTML Imports <template> Shadow DOM Pointer Events others The left-nav … Read more
You could utilize HTML5 data attributes instead. Try like this: <paper-button id=”foo” on-tap=”bar” data-args=”foo,some other value,2″>Click</paper-button> … <script> (function() { Polymer({ is: ‘example’, properties: {…}, bar: function(e){ var args = e.target.getAttribute(‘data-args’).split(‘,’); // now args = [‘foo’, ‘some other value’, ‘2’] } }); })(); </script>
As per @hayatoito‘s (creator of Shadow DOM) comment: The original motivation of introducing a closed shadow tree is “Never allow an access to a node in a closed shadow tree, via any APIs, from outside”, AFAIK. Like that we can not access a node in the internal hidden shadow tree which is used in <video> … Read more
All browsers support a finite list of HTML elements which are considered as “known”. Elements which are unknown (e.g <city>, <person>) do not generally throw errors with the HTML parser in modern browsers and instead inherit from HTMLUnknownElement. In older versions of IE however, such elements would be inserted into the DOM as an empty … Read more
Private resources should be installed in your component folder and used directly. But shared resources, those resources that other components my also want to use (like marked), should be handled as dependencies. We suggest two conventions for handling shared dependencies: always use the canonical path which is ../<package-name> (you did this already). Polymer by convention … Read more
For me it was sufficient to use @webcomponents/custom-elements package in my content.js. Also webcomponents-sd-ce.js weights about 80kb and custom-elements.min.js only 16kb. Just install it as a dependancy and import it in the content.js and let your package manager do the rest. npm i @webcomponents/custom-elements import ‘@webcomponents/custom-elements’ This is how I use it in my project … Read more