Nested component rendering with wrong order

[barisburakbalci]

I have a customer-list component & inside of it a customer component. They both rendering without any error. But rendering order is wrong. You might notice in below screenshots, customer component is inside a table > tbody . But comes before it. And then table > tbody renders afterwards.

Is there any trick to avoid this?

[sk8yuck]

I've met this issue. It seems like the author uses doc.body.innerHTML to wrap the responseText (.vue file). As we know that a <slot> tag should not be in a <table> tag, so the <slot> tag will appears above the <table> tag.

I'm thinking to patch this by using plain-text or xml or something to parse template maybe... Any ideas?

[sk8yuck]

In my case I solved it by add 'plainContent' to TemplateContext, and in Component.load I added a Regex based method to extract template plain content by matching <template> tag. like this: `extractTemplate:function(responseText){ var regexStart = /\<template\s[^\/]?(>)$/sm; var regexEnd = /\<\/template>$/gsm;

var tagStartArr = regexStart.exec(responseText);
var tagEndArr = regexEnd.exec(responseText);
var indexStart = responseText.indexOf(tagStartArr[0]);
var indexEnd = responseText.lastIndexOf(tagEndArr[tagEndArr.length - 1]);

var result = responseText.substring(indexStart + tagStartArr[0].length, indexEnd);
return result;

}`

and I changed TemplateContext.getContent like this: getContent: function() { if(this.plainContent){ return this.plainContent; }else{ return this.elt.innerHTML; } },

I think the perfect solution is to parse responseText using XML since JS has native API to parseXML, but it seems a LOT work to do. Should I pull a request?