slot test

src/component.js

@@ -293,8 +293,7 @@ class Component {
             }
         }
         this.beforeRender()
-        this._generateHTMLCSS()
-        this._fixSlot()
+        this._fixSlot(this._generateHTMLCSS())
         if (!isSelf) {
             this._extractChildren(this)
         } else {
@@ -308,7 +307,8 @@ class Component {
         return this.HTML
     }
 
-    _fixSlot() {
+    _fixSlot(shareAttr) {
+        this._omi_slotContent = this._scopedAttr(this._omi_slotContent, this._omi_scoped_attr, shareAttr)
         let nodes = morphdom.toElements(this._omi_slotContent)
         let slotMatch = this.HTML.match(/<slot[\s\S]*?<\/slot>/g)
         if(nodes.length === 1 && slotMatch && slotMatch.length===1) {
@@ -450,11 +450,13 @@ class Component {
             }
         }
         let tpl = this.render()
-        this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr,shareAttr).trim()
+        this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr, shareAttr).trim()
         if (this._omi_server_rendering) {
             this.HTML = '\r\n<style id="'+Omi.STYLEPREFIX+this.id+'">\r\n' + this.CSS + '\r\n</style>\r\n'+this.HTML
             this.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\'  />\r\n'
         }
+
+        return shareAttr
     }
 
     _scopedAttr(html, id, shareAtrr) {
@@ -530,6 +532,7 @@ class Component {
         //if not first time to invoke _extractChildren method
         if (cmi && cmi.___omi_constructor_name === name) {
             cmi._omiChildStr = childStr
+            cmi._omi_slotContent = slotContent
             Object.keys(attr).forEach(key => {
                 const value = attr[key]
                 if (key === 'group-data') {

test/js/slot.js

@@ -12,26 +12,66 @@ class Hello extends Omi.Component {
 class Test extends Omi.Component {
 
     render() {
-        return  `<div>
-                    <slot></slot>
-                    efg
-                </div>`;
+        return  `<div><slot></slot>efg</div>`;
 
     }
 }
 Omi.tag('Test',Test)
 var hello = Omi.render(new Hello(),'body');
 
-describe("A suite is just a function", function() {
+describe("slot1", function() {
 
 
     var result = hello.node.outerHTML
-    console.log(result)
+
     it("hello omi", function() {
-        expect(result).toBe(`<div omi_scoped_1=""><div omi_scoped_2="" omi_scoped_test="">
-                    <div omi_scoped_1="" style="color:red;">abc</div>
-                    efg
-                </div></div>`);
+        expect(result).toBe(`<div omi_scoped_1=""><div omi_scoped_2="" omi_scoped_test=""><div omi_scoped_2="" omi_scoped_test="" omi_scoped_1="" style="color:red;">abc</div>efg</div></div>`);
     });
 });
 
+
+class Hello2 extends Omi.Component {
+
+    render() {
+        return  `<div>
+                    <Test2>
+                        <div slot-index="1" style="color:red;">abc</div>
+                        <div slot-index="0" style="color:green;">efg</div>
+                    </Test2>
+                </div>`;
+
+    }
+}
+
+
+class Test2 extends Omi.Component {
+
+    render() {
+        return  `<div>
+                    <slot></slot>
+                    <slot></slot>
+                </div>`;
+
+    }
+}
+Omi.tag('Test2',Test2)
+
+
+
+
+describe("slot2", function() {
+
+
+    var hello2 = Omi.render(new Hello2(),'body');
+
+    var result2 = hello2.node.outerHTML
+
+    it("hello omi", function() {
+        expect(result2).toBe(`<div omi_scoped_3="">
+                    <div omi_scoped_4="" omi_scoped_test2="">
+                    <div omi_scoped_4="" omi_scoped_test2="" omi_scoped_3="" slot-index="0" style="color:green;">efg</div>
+                    <div omi_scoped_4="" omi_scoped_test2="" omi_scoped_3="" slot-index="1" style="color:red;">abc</div>
+                </div>
+                </div>`);
+    });
+});