This is an issue that’s been bothering me as well for a while, esp when faced with maintaining code that’s been touched by numerous developers. You often encounter multiple JS libraries (some of which essentially does the same thing) included in one solution, not to mention even different versions of the same framework used in … Read more
As it turns out the Shadow DOM retargets click events and encapsulates the events in the shadow. React does not like this because they do not support Shadow DOM natively, so the event delegation is off and events are not being fired. What I decided to do was to rebind the event to the actual … Read more
For others who end up here, the specific property you’re looking for to break out of the shadow root ‘jail’ is “composed”. So: this.checkEvent = new CustomEvent(“check”, { bubbles: true, cancelable: false, composed: true }); You can also add another property, “detail” which will carry custom data on the event, if you like. More info … Read more
::shadow and /deep/ were removed for breaking encapsulation. The substitutes are: CSS variables. It already works natively with the recently launched Google Chrome 49. Read here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html :host-context. Read here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
Use slot elements in your ShadowDOM template. Build your custom elements in a way so that they can live in any context, like as a child or parent element, without having any dependencies with other custom-elements. This approach will give you a modular design in which you can utilize your custom-elements in any situation. But … Read more
You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render. Also need to import React in all files that use JSX. Finally, also put react-router imports into Main, too. The way imports work is, you import things you need, in places they’re needed. It’s not … Read more
styling ::slotted elements in shadowDOM TL;DR ::slotted Specs: https://drafts.csswg.org/css-scoping/#slotted-pseudo slotted content remains in light DOM, is reflected to a <slot> in shadow DOM ::slotted(x) targets the lightDOM outer-Element (aka ‘skin’), NOT the SLOT in shadowDOM ::slotted(x) takes basic selectors Inheritable styles trickle into shadowDOM https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ For the latest WHATWG discussion on SLOT and related topics, … Read more
UPDATE OFFICIAL Angular CLI https://angular.io/guide/creating-libraries You can create an angular2 component library (with tests) and then use it in any number of projects Then you can publish it on npm for public use. If you want to keep it private, you can read this https://docs.npmjs.com/creating-and-publishing-private-packages Yes, many 3rd party angular2 components exist. Here are a … Read more
I’ve been researching in the past 3 weeks and turns out many people are thinking about an alternative after Angular took a drastic change path. Fortunately the upcomming W3C Web Components standard actually has all we need and it works right now with polyfills from the Polymer project. So to answer the question: Angular Directives … Read more
In the main file, use <script> to load the Javascript file x-counter.js. In the Javascript file, use fetch() to load the HTML code x-counter.html. In the HTML file, use <link rel=”stylesheet”> to load the CSS file x-counter.css. CSS file : x-counter.css button, p { display: inline-block; color: dodgerblue; } HTML file : x-counter.html <link rel=”stylesheet” … Read more