Search code examples
web-componentriot.jscustom-tags

Riot.JS: Tag within Tag in HTML Page

I am new to RiotJS (just discovered it yesterday). I just tried to do a little experiment which did NOT work. I created two tag files (navbar.tag and dropdown.tag). Each one was as simple as could be – simply a h3 tag with the name of the file:

// navbar.tag
<h3>Navbar</h3>


// dropdowntag
<h3>Dropdown</h3>

On my index.html page I want to nest the dropdown tag within the navbar tag like this:

<navbar>
    <dropdown></dropdown>
</navbar>

That does not to work. Navbar shows up, but not dropdown. Only if I separate the two tags do both work -- i.e., like this:

<navbar></navbar>
<dropdown></dropdown>

Any idea how I can nest different tags within an html page. I know you can nest them within .tag files, but that is not what I want to do. What I want is the flexibility to nest custom tags that I create on ay html page (like I can do with regular html tags).

Any ideas?

Thanks.

Solution

  • You cannot modify the existing structure. RiotJS use this constraint as an advantage to ensure good performance.

    To insert another tag into existing tag, use <yield/>.

    See JSFiddle.