diff --git a/src/ignite-element.js b/src/ignite-element.js
index 1cab669..a30a843 100644
--- a/src/ignite-element.js
+++ b/src/ignite-element.js
@@ -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) {
diff --git a/src/ignite-template.js b/src/ignite-template.js
index a8634b7..6b25cea 100644
--- a/src/ignite-template.js
+++ b/src/ignite-template.js
@@ -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
};
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index ddb7b2b..6911349 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,9 @@
-
+
+ this is a test
+
diff --git a/src/main-app.js b/src/main-app.js
index 3fd25a4..3c45013 100644
--- a/src/main-app.js
+++ b/src/main-app.js
@@ -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(`This is a slot!`),
+ new slot(this)
+ )
+ );
}
}