native-web-component | 易学教程

textContent empty in connectedCallback() of a custom HTMLElement

阅读更多关于 textContent empty in connectedCallback() of a custom HTMLElement

问题 Within the connectedCallback() method of my custom element the textContent is returned as an empty string. Essentially my code boils down to the following... class MyComponent extends HTMLElement{ constructor() { super() console.log(this.textContent) // not available here, but understandable } connectedCallback() { super.connectedCallback() // makes no difference if present or not console.log(this.textContent) // not available here either, but why?! } } customElements.define('my-component',

slot selector limit in web component

阅读更多关于 slot selector limit in web component

slot is good to make a reusable web component, however, it has a limit so far. What I faced is the style problem. You just can't define the style inside a component, even you know what the inject content's structure would be. Details found from my post in github here I write a component, and try to inject content through slot from the outside and try to add style to the specific content in the component's shadow root. Demo HTML file <my-navbar> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </my-navbar> JS file customElements.define('my-navbar', class extends HTMLElement { constructor

How to communicate between Web Components (native UI)?

阅读更多关于 How to communicate between Web Components (native UI)?

问题 I'm trying to use native web components for one of my UI project and for this project, I'm not using any frameworks or libraries like Polymer etc. I would like to know is there any best way or other way to communicate between two web components like we do in angularjs/angular (like the message bus concept). Currently in UI web-components, I'm using dispatchevent for publishing data and for receiving data, I'm using addeventlistener . For example, there are 2 web-components, ChatForm and