diff --git a/Slim.js b/Slim.js index aeddf82..df23f84 100644 --- a/Slim.js +++ b/Slim.js @@ -286,6 +286,12 @@ class Slim extends HTMLElement { } } else if (typeof($tpl) === 'string') { this._virtualDOM.innerHTML = $tpl + let virtualContent = this._virtualDOM.querySelector('content') + if (virtualContent) { + while (this.children.length) { + virtualContent.appendChild( this.children[0] ) + } + } } let allChildren = Array.prototype.slice.call( this._virtualDOM.querySelectorAll('*') ) diff --git a/bower.json b/bower.json index cca8d3a..911602b 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "slimjs", "main": "Slim.js", - "version": "2.1.2", + "version": "2.2.0", "ignore": [ "example", "components", diff --git a/example/tests/bind-child.js b/example/tests/bind-child.js index 63d093b..ad4ed1b 100644 --- a/example/tests/bind-child.js +++ b/example/tests/bind-child.js @@ -12,7 +12,7 @@ Slim.tag('bind-child', class extends Slim { this.onclick = ()=>{ this.customRender = !this.customRender; if (this.customRender) { - this.render(`
[[data.label]] : [[data.value]]
`) + this.render(`
[[data.label]] : [[data.value]]
`) } else { this.render() } diff --git a/example/tests/bind-parent.js b/example/tests/bind-parent.js index 3557a39..774bf5f 100644 --- a/example/tests/bind-parent.js +++ b/example/tests/bind-parent.js @@ -2,14 +2,18 @@ Slim.tag('bind-parent', class extends Slim { get template() { return ` -
[[wProp]]
-
[[data.label]] >>> [[data.value]]
-
- -
-
- -` +
[[wProp]]
+
[[data.label]] >>> [[data.value]]
+
+ ` + } + + testOnCancel() { + alert('cancel') + } + + testOnConfirm() { + alert('ok') } onBeforeCreated() { @@ -20,7 +24,8 @@ Slim.tag('bind-parent', class extends Slim { "alpha", "beta", "charlie", "delta", [ "echo", "foxtrot", "golf", "hotel", "juliet", [ "kilo", "lima", "mike", "november" - ] + ], + "opera" ] ] this.items = [ {label: 'item1', value: 1}] diff --git a/example/tests/bind-test.html b/example/tests/bind-test.html index bab5cbd..99ce2fa 100644 --- a/example/tests/bind-test.html +++ b/example/tests/bind-test.html @@ -31,13 +31,59 @@ - + + +
+
+ + +

Confirm reusable example

+
Are you sure?
+
+
+ diff --git a/framework/components/group.js b/framework/components/group.js index a332c04..589a3a8 100644 --- a/framework/components/group.js +++ b/framework/components/group.js @@ -3,7 +3,11 @@ * * s-hgroup */ -Slim.tag('s-hgroup', class extends HTMLElement { +Slim.tag('s-hgroup', class extends Slim { + get template() { + return `` + } + createdCallback() { this.style.display = 'flex' this.style.flexDirection = 'row' @@ -16,7 +20,11 @@ Slim.tag('s-hgroup', class extends HTMLElement { * * s-vgroup */ -Slim.tag('s-vgroup', class extends HTMLElement { +Slim.tag('s-vgroup', class extends Slim { + + get template() { + return `` + } createdCallback() { this.style.display = 'flex' diff --git a/package.json b/package.json index 9e74994..b443de4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "slim-js", - "version": "2.1.2", + "version": "2.2.0", "description": "Slim web components infrastructure", "main": "Slim.js", "scripts": {