It reminds a bit of the tag files of riot.js [1] Another possible approach (widely practiced today) is to have the children template extend the main template and override some blocks in the main template (you can do it with twig, blade etc). But even then, your templates could not be nested.
Can you please give us an example user control where:
1. you've got CSS and JS code that goes in the head tag of the result document
2. you've got JS code that stays at the bottom of the body tag of the result document
What is stopping from styles from one components overwriting styles from another components. So in isolation, as you say, components work fine, but after processing, will it not break?
Currently, there isn't an automatic solution. For now the component developer can use the component id (automatically generated if not specified) to separate styles. You can see such component at https://github.com/ivopetkov/ivopetkov.github.io/blob/master...
It reminds a bit of the tag files of riot.js [1] Another possible approach (widely practiced today) is to have the children template extend the main template and override some blocks in the main template (you can do it with twig, blade etc). But even then, your templates could not be nested.
Nice concept!
[1] http://muut.com/riotjs