As already stated by Juvian in the comments: constructor() is called when the element is created. connectedCallback() is called when (after) the element is attached to the DOM. The constructor() call is not specific to Custom Elements, it occurs with any object creation (typically created with the new operator), and not only HTML Elements. In … Read more
The solution for now is to rely on package management to resolve Polymer to a single compatible version for a project and its dependencies, and HTML Imports to de-duplicate loading of dependencies from multiple sources. If you vend your elements as Bower packages, then a site can include them, with their dependencies and imports of … Read more
@int32_t is right in that Shadow DOM, by definition, is a way to fill a node with DOM that you want to hide from external sources (Encapsulation). The point is that you as the component author get to choose exactly which parts will be exposed to outside CSS or JavaScript and which will not. Unfortunately, … Read more
How adding/removing input elements dynamically possible? Yes, it is possible, you can add/remove input elements dynamically, But for that you need to take care of few things: 1- Proper binding of events. 2- Array to store the values of each input element separately. 3- When user fill value in any input element then updating only … Read more
Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope. It could be possible with CSS variables but they should be implemented explicitly in the shadowed component (which is not the case with this 3rd party … Read more
Using Chrome Canary, you can access this by viewing the element’s Computed styles and enabling the Show all filter: …
Pros and Cons of Facebook’s React vs. Web Components (Polymer) [closed]
Passing Data In If you really want/need to pass large amounts of data into your component then you can do it four different ways: 1) Use a property. This is the simplest since you just pass in the Object by giving the value to the element like this: el.data = myObj; 2) Use an attribute. … Read more
There is a way to check whether an element was registered. Registered elements have their own constructors, while unregistered ones would use plain HTMLElement() for constructor (or HTMLUnknownElement() whether the name is not valid, but this is out of scope of the question): document.registerElement(‘x-my-element’); document.createElement(‘x-my-element’).constructor //⇒ function x-my-element() { [native code] } document.createElement(‘x-my-element-not-registered’).constructor //⇒ function … 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