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

Added a new ability to specify a slot for child elements of a IgniteElement to be placed in. Next up is a reconstruct method, which may or may not be possible, not sure.

Browse Source
This commit is contained in:
Matt Mo 2020-07-28 22:46:22 -07:00
parent 43962757f0
commit 374defdc82
4 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ignite-element.js
View File

@ -7,6 +7,7 @@ class IgniteElement extends HTMLElement {
this.onDisconnected = null;
this.template = null;
this.elements = [];
this.createProperties();
}
@ -50,6 +51,9 @@ class IgniteElement extends HTMLElement {
this.template.element = this;
this.template.tagName = this.tagName;
//Add any childNodes we have to the elements list within this
this.childNodes.forEach((item) => this.elements.push(item));
//Make sure the render template is our template, if not, add it as a child.
var renderTemplate = this.render();
if (renderTemplate !== this.template && renderTemplate) {

26
src/ignite-template.js
View File

@ -375,10 +375,34 @@ class property extends IgniteTemplate {
}
}
class slot extends IgniteTemplate {
constructor(element) {
super(null);
this.parent = element;
}
construct(parent, sibling) {
if (!this.element) {
this.element = window.document.createTextNode("");
if (sibling) {
parent.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
//Add any slot elements after this element.
this.parent.elements.forEach((item) => this.element.parentElement.insertBefore(item, this.element));
}
}
}
export {
IgniteTemplate,
div,
html,
list,
a
a,
slot
};

4
src/index.html
View File

@ -9,7 +9,9 @@
</head>
<body>
<main-app></main-app>
<main-app>
<h1>this is a test</h1>
</main-app>
</body>
<script src="WebComponentsPolyfill.js"></script>

11
src/main-app.js
View File

@ -1,5 +1,5 @@
import { IgniteElement } from './ignite-element.js';
import { IgniteTemplate, div } from './ignite-template.js';
import { IgniteTemplate, div, slot, html } from './ignite-template.js';
import { Sheet } from './sheet.js';
class MainApp extends IgniteElement {
@ -16,7 +16,14 @@ class MainApp extends IgniteElement {
}
render() {
return new Sheet().property("name", this.name);
return this.template
.child(new Sheet().property("name", this.name))
.child(
new div(
new html(`<h1>This is a slot!`),
new slot(this)
)
);
}
}