- From: Toni-Jan Keith Monserrat <notifications@github.com>
- Date: Wed, 27 Jun 2018 05:26:36 -0700
- To: w3c/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
Received on Wednesday, 27 June 2018 12:26:59 UTC
Hi @o-t-w
Actually slot change fires whenever you do an `innerHTML` or `textContent` equation on the component. So I don't understand why it is verbose...
See example
```
const { HTMLElement, customElements } = window;
class Component extends HTMLElement {
static get is () { return 'simple-component'; }
constructor () {
super();
const shadow = this.attachShadow({ mode: 'open' });
this._boundSlotChange = this._slotChange.bind(this);
this._slot = document.createElement('slot');
this._slot.addEventListener('slotchange', this._boundSlotChange);
shadow.appendChild(this._slot);
}
_slotChange (e) {
console.log(e);
console.log(this._slot.assignedNodes());
}
}
if (!customElements.get(Component.is)) {
customElements.define(Component.is, Component);
} else {
console.warn(`${Component.is} is already defined somewhere. Please check your code.`);
}
```
and then I fired it off with
```
const simple = document.querySelector('simple-component'); // given that it is in the document
simple.innerHTML = 'Hello there'
```
I just tested it now
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/753#issuecomment-400653473
Received on Wednesday, 27 June 2018 12:26:59 UTC