Avoiding invalid html

[smmoosavi]

As I see, created htmls by riot is invalid (https://validator.w3.org/)

For example:

Error: Element todo not allowed as child of element body in this context.

Can we include tags without invalid htmls or extraneous tags?

[cognitom]

@smmoosavi a short answer is "no".

Custom elements are still editor's draft, so there's no official validator AFAIK.
http://w3c.github.io/webcomponents/spec/custom/
This draft says that the name of custom tag

must contain a U+002D HYPHEN-MINUS character

It would be safe to change todo to app-todo or something if you prefer to follow this spec.

There's a way to mount them as normal tags:

<div riot-tag="todo"></div>

but, riot-tag is not allowed as an attr of div in spec, so it'll not pass the validator, too, unfortunately.

[cognitom]

Some comparative information for later discussion:

• Angular has normalization process: <input data-ng-model="foo">
• Vue removes all directive attributes after rendering them

Vue's way is not fit to Riot.js. Normalization like Angular would be nice. Thoughts? @rsbondi

[smmoosavi]

Ok.

I can't find including custom tags implementation in codes. So I say my idea with jquery. (can you say where is implimentations?)

In jquery contents function return inner nodes of some tag, and replaceWith function replace some elements with other elements.

if you replace contents of tag implementation with include statement it works correctly

<item id="def">
  <b>abc</b>
</item>

<div> <!-- usage -->
  <item id="use1"></item>
  <item id="use2"></item>
</div>

and js do some things equal to:

var $def = $('#def').contents();
$("#use1").replaceWith($def);
$("#use2").replaceWith($def);

result:

<div>
  <b>abc</b>
  <b>abc</b>
</div>

[cognitom]

@smmoosavi your example doesn't make sense for me...
Could you check compiler and tmpl?
Riot v2.3 has split into several repos, FYI.

[georgir]

I don't see why you say vue's way is not fit for riot. Just this.root.removeAttribute('riot-tag') on mount event. You can also mix it in with a mixin.
Should be possible for if and each too, though i've not looked into where and how exactly. Or just use virtual tag for them. if and each are already being removed by riot

edit: and just for the root tag there's also the last two forms of riot.mount http://riotjs.com/api/#mount-tag

[GianlucaGuarini]

@georgir You should not forget that all the riot tags get styled using [riot-tag="item"] { color: red } so we can not simply remove the riot-tag attributes

[gregorypratt]

Could we add support for a data-riot-tag attribute that would pass W3C?

[GianlucaGuarini]

fixed in riot@2.3.17 use the attribute data-is