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.onDisconnected = null;
this.template = null; this.template = null;
this.elements = [];
this.createProperties(); this.createProperties();
} }
@ -50,6 +51,9 @@ class IgniteElement extends HTMLElement {
this.template.element = this; this.template.element = this;
this.template.tagName = this.tagName; 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. //Make sure the render template is our template, if not, add it as a child.
var renderTemplate = this.render(); var renderTemplate = this.render();
if (renderTemplate !== this.template && renderTemplate) { 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 { export {
IgniteTemplate, IgniteTemplate,
div, div,
html, html,
list, list,
a a,
slot
}; };

4
src/index.html
View File

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

11
src/main-app.js
View File

@ -1,5 +1,5 @@
import { IgniteElement } from './ignite-element.js'; 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'; import { Sheet } from './sheet.js';
class MainApp extends IgniteElement { class MainApp extends IgniteElement {
@ -16,7 +16,14 @@ class MainApp extends IgniteElement {
} }
render() { 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)
)
);
} }
} }