Is it possible to not omit some opts on the outermost element in a custom Riot tag?

27 Views Asked by At

I'm using RiotJS v3.9

I've written a custom tag that accepts a few opts. The problem is that the markup it generates includes all of those opts on the outermost element, in addition to the interior tags where I explicitly deposit them. I do not want any opts to appear on the top element unless I make that happen.

In this case, my custom tag display a list of items. One of the opts it accepts is the value for a specific data- attribute on each list item. So, I want data-something={opts.itemSomething} to appear on each list item, but I do not want that to appear on the wrapper.

// my-list.tag
<my-list>
    <ul data-something={ opts.something }>
        <li
            each={ item in opts.items }
            data-something={ parent.opts.itemSomething }
        >
            { item }
        </li>
    </ul>
</my-list>

Using it:

<my-app>
    
    <my-list
        something="parent-value"
        item-something="child-value"
        items={['one', 'two', 'three']}
    />
    
</my-app>

What it emits into the page:

<my-list something="parent-value" item-something="child-value">
    <ul data-something="parent-value">
        <li data-something="child-value"> one </li>
        <li data-something="child-value"> two </li>
        <li data-something="child-value"> three </li>
    </ul>
</my-list>

I don't want the emitted <my-list> tag to have either the parent-value or the child-value on it. I only want those attributes to appear on the <ul> and <li>, like I coded it.

// bad output
<my-list something="parent-value" item-something="child-value">

// good output
<my-list>

Is this possible?

Also, I know from working with React that I'm likely to encounter future cases where I want some of the opts to appear on the wrapper while hiding others. So, ideally I'd like to know how to control this behavior on a per-opt basis.

1

There are 1 best solutions below

2
On

you can remove the unwanted attributes in both the "updated" and "mount" event.

check this demo

However I strongly suggest you to switch to riot@5!!