{"action":"closed","issue":{"url":"https://api.github.com/repos/muut/riotjs/issues/295","labels_url":"https://api.github.com/repos/muut/riotjs/issues/295/labels{/name}","comments_url":"https://api.github.com/repos/muut/riotjs/issues/295/comments","events_url":"https://api.github.com/repos/muut/riotjs/issues/295/events","html_url":"https://github.com/muut/riotjs/issues/295","id":56502241,"number":295,"title":"Rid of custom root element","user":{"login":"ivan-saorin","id":1847361,"avatar_url":"https://avatars.githubusercontent.com/u/1847361?v=3","gravatar_id":"","url":"https://api.github.com/users/ivan-saorin","html_url":"https://github.com/ivan-saorin","followers_url":"https://api.github.com/users/ivan-saorin/followers","following_url":"https://api.github.com/users/ivan-saorin/following{/other_user}","gists_url":"https://api.github.com/users/ivan-saorin/gists{/gist_id}","starred_url":"https://api.github.com/users/ivan-saorin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ivan-saorin/subscriptions","organizations_url":"https://api.github.com/users/ivan-saorin/orgs","repos_url":"https://api.github.com/users/ivan-saorin/repos","events_url":"https://api.github.com/users/ivan-saorin/events{/privacy}","received_events_url":"https://api.github.com/users/ivan-saorin/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-02-04T09:35:43Z","updated_at":"2015-04-15T21:58:25Z","closed_at":"2015-04-15T21:58:25Z","body":"I found that with the current implementation of riot it is very hard to make existing css framework such as bootstrap (or themes built with it) work properly.\r\nThe origin of the problem is the inclusion of the root node in the resulting HTML.\r\nFor example let say we have two custom tags: custom-ul and custom-li\r\n\r\n```html\r\n<custom-ul>\r\n   <ul each={ item, i in menu.items }>\r\n      <custom-li menu=\"item\"></custom-li>\r\n   </ul>\r\n\r\n   this.menu = opts.menu\r\n</custom-ul>\r\n```\r\n\r\n```html\r\n<custom-li>\r\n   <li>\r\n      <a href={  } onclick={ parent.click }>{ menu.title }</a>\r\n   </li>\r\n\r\n   this.menu = opts.menu\r\n   \r\n   click(e) {\r\n      // do something with e.item\r\n   }\r\n</custom-li>\r\n```\r\n\r\nThe resulting html will resemble this:\r\n```html\r\n   <custom-ul>\r\n      <ul>\r\n         <custom-li>\r\n            <li ></li>\r\n         </custom-li>\r\n         <custom-li>\r\n            <li ></li>\r\n         </custom-li>\r\n         <custom-li>\r\n            <li ></li>\r\n         </custom-li>\r\n      </ul>\r\n   </custom-ul>\r\n```\r\n\r\nAs far as I know this kind of markup will break all css rules of type ul > li.\r\n\r\nSo I ended up with this solution I added a flag in the opts called replaceTag that trigger this if at line 148 of https://github.com/muut/riotjs/blob/master/lib/view.js\r\n```javascript\r\n    if (opts.replacetag) {\r\n      console.log('replaceChild', mountNode.parentNode, mountNode, dom.firstChild)\r\n      mountNode = mountNode.parentNode.replaceChild(dom.firstChild, mountNode)\r\n    }\r\nelse {\r\n    // append to root\r\n    while (dom.firstChild) {\r\n      if (conf.before) mountNode.insertBefore(dom.firstChild, conf.before)\r\n      else mountNode.appendChild(dom.firstChild)\r\n    }\r\n}\r\n```\r\n\r\nThis will remove the root node from the generated html\r\n```html\r\n      <ul>\r\n            <li ></li>\r\n            <li ></li>\r\n            <li ></li>\r\n      </ul>\r\n   </custom-ul>\r\n```\r\n\r\nThe problem I found is that events didn't work anymore.\r\nSo I come up this this solution that I would like to discuss with you:\r\n148 of https://github.com/muut/riotjs/blob/master/lib/view.js\r\n```javascript\r\n    if (opts.replacetag) {\r\n      console.log('replaceChild', mountNode.parentNode, mountNode, dom.firstChild)\r\n      mountNode.parentNode.insertBefore(dom.firstChild, mountNode.nextSibling)\r\n    }\r\nelse {\r\n    // append to root\r\n    while (dom.firstChild) {\r\n      if (conf.before) mountNode.insertBefore(dom.firstChild, conf.before)\r\n      else mountNode.appendChild(dom.firstChild)\r\n    }\r\n}\r\n```\r\n\r\nThat will generate the following html if the relaceTag flag is true\r\n```html\r\n   <custom-ul></custom-ul>\r\n   <ul>\r\n      <custom-li></custom-li>\r\n      <li ></li>\r\n      <custom-li></custom-li>\r\n      <li ></li>\r\n      <custom-li></custom-li>\r\n      <li ></li>\r\n   </ul>\r\n```\r\n\r\nThis will allow to events to remain attached to the original root node and to work properly. It also maintains compatibility with with ul > li css rules.\r\n\r\nMy question now is how to proceed. Is the change interesting? Shall I do a Pull Request?\r\n\r\nDo you have a better name for replaceTag flag? Should it be a flag inside opts first of all? Are there any other way you may think of?\r\n"}}