MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed a bug where the browser will call onConnected and onDisconnected for an IgniteElement if it is moved to another location in the DOM. The element instance is the same but it triggers a disconnect and then a connect, to combat this I added code to mitigate this and detect it. Slots now apply classes, styles, attributes to children in the slot. And a few other minor changes.

Browse Source
This commit is contained in:
Matt Mo
2020-09-09 08:24:18 -07:00
parent 3072bb2f7c
commit 780f70188e
2 changed files with 205 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/ignite-element.js
View File

@@ -50,6 +50,7 @@ class IgniteElement extends HTMLElement {
constructor() {
super();
this.connected = false;
this.onDisconnected = null;
this.template = null;
this.elements = [];
@@ -156,6 +157,15 @@ class IgniteElement extends HTMLElement {
* @ignore
*/
connectedCallback() {
//Only run this if we haven't been connected before.
//If this element is moved the instance will be the same but it will call this again
//and we want to trap this and not run the code below twice.
if (this.connected) {
return;
} else {
this.connected = true;
}
//See if a styling sheet has been created for this element if it's needed.
if (this.styles !== null && this.styles !== "") {
if (document.getElementsByClassName(`_${this.tagName}_styling_`).length == 0) {
@@ -205,16 +215,26 @@ class IgniteElement extends HTMLElement {
* @ignore
*/
disconnectedCallback() {
//If we still have a reference to our template, deconstruct it.
if (this.template) {
this.template.deconstruct();
}
//Run a test here, if the element was moved but not removed it will have a disconnect
//get called but then be reconnected, so use a timer to see if this is what happened.
setTimeout(() => {
//If the element is connected then don't do this, more than likely
//the element was moved or something.
if (this.isConnected) {
return;
}
//If we have a onDisconnected callback, call it and then remove the reference.
if (this.onDisconnected) {
this.onDisconnected();
this.onDisconnected = null;
}
//If we still have a reference to our template, deconstruct it.
if (this.template) {
this.template.deconstruct();
}
//If we have a onDisconnected callback, call it and then remove the reference.
if (this.onDisconnected) {
this.onDisconnected();
this.onDisconnected = null;
}
}, 1);
}
/**