Is there any constraint that’s preventing <thead>, <tbody>, <tr> and so on to be slotted in shadow DOM? Given the following example: renders into the following structure: The workaround would be to use templates and insert template content with JS in slotchange event handler, but I wou…
Tag: web-component
When should I use componentDidMount?
In React componentDidMount is used during the mounting phase, for example, one can setState and wrap it in componentDidMount. But, one can use setState directly and then render the component. In which cases should I prefer componentDidMount for a mounting phase? Answer It’s useful for several things: St…
What happens to child nodes if there is no “, but a shadow root
Consider this code: This will show »Test« within the browser. If the constructor is changed to: The »Test« disappears, since there is a shadow root now. If the constructor is furthermore changed to The »Test« appears again, since there is now a default slot for all child Nodes of <foo-bar> But what happ…
How would I import a custom web component asynchronously?
I have made my custom input element (modern text input for forms) into a web component. The .js file that I made to implement it has three parts. The HTML Template: The Element’s Class Declaration: Lastly, The Method That Associates the Custom Element to a Tag Name: Question: I am worried that using <…
How should I reference assets in angular custom element (Web Components)
I have created a web component and I referenced image from my asset folder in there as below on local everything is fine, I published my custom element to firebase host and javascript, css and asset folder already exist on my host. then I tried to use my web component in another html peage as below and served…
Listen for global events on a Web Component
I have a main.js that makes a call to an API and receives a response object. After the response, I want to fire an event that my Custom Web Component is listening for. This event works in the main document. I’ve attached a listener to the main document to test but it is not heard on my custom component.…
Creating custom element without using class keyword
This is actually more a question about the object-orientation model in ES6. However I am going to use the creation of a new custom element as an example. So the new and shiny (as of today) method to create a new custom element is via customElements.define() which take in a tag name, a constructor, and options…
How can I share an Angular 2 component between multiple Angular 2 projects?
Ideally, I’d like to create a stand-alone Angular 2 component (with tests) and then re-use it between two or three different Angular 2 sites. What are the good ways to achieve this? And a bonus question – do any 3rd party Angular 2 components exist? Answer UPDATE OFFICIAL Angular CLI https://angul…