{"action":"created","issue":{"url":"https://api.github.com/repos/skatejs/skatejs/issues/1096","repository_url":"https://api.github.com/repos/skatejs/skatejs","labels_url":"https://api.github.com/repos/skatejs/skatejs/issues/1096/labels{/name}","comments_url":"https://api.github.com/repos/skatejs/skatejs/issues/1096/comments","events_url":"https://api.github.com/repos/skatejs/skatejs/issues/1096/events","html_url":"https://github.com/skatejs/skatejs/issues/1096","id":212677302,"number":1096,"title":"Using slots with react 15","user":{"login":"tauren","id":282084,"avatar_url":"https://avatars1.githubusercontent.com/u/282084?v=3","gravatar_id":"","url":"https://api.github.com/users/tauren","html_url":"https://github.com/tauren","followers_url":"https://api.github.com/users/tauren/followers","following_url":"https://api.github.com/users/tauren/following{/other_user}","gists_url":"https://api.github.com/users/tauren/gists{/gist_id}","starred_url":"https://api.github.com/users/tauren/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tauren/subscriptions","organizations_url":"https://api.github.com/users/tauren/orgs","repos_url":"https://api.github.com/users/tauren/repos","events_url":"https://api.github.com/users/tauren/events{/privacy}","received_events_url":"https://api.github.com/users/tauren/received_events","type":"User","site_admin":false},"labels":[{"id":78094229,"url":"https://api.github.com/repos/skatejs/skatejs/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":19,"created_at":"2017-03-08T09:11:02Z","updated_at":"2017-05-04T21:40:41Z","closed_at":"2017-03-12T22:25:05Z","body":"I'm trying to build a CE that uses slots and render it in a React app.  This fails:\r\n\r\n```\r\nwarning.js:36 Warning: Unknown prop `slot` on <h1> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop\r\n```\r\n\r\nIt appears there was a [PR](https://github.com/facebook/react/pull/8061) to resolve this specific issue, but it won't land until React 16. In the meantime, is there a workaround I can use to make things work?\r\n\r\nHere is the CE:\r\n\r\n```\r\n/** @jsx h */\r\nimport { Component, h, define } from 'skatejs';\r\nexport default class Example extends Component {\r\n  static is = 'u-example'\r\n  static get props() {\r\n    return {}\r\n  }\r\n  renderCallback() {\r\n    return [\r\n      <style></style>,\r\n      <div>\r\n        <header><slot name=\"header\"/></header>\r\n        <main><slot name=\"body\"/></main>\r\n        <footer><slot name=\"footer\" /></footer>\r\n      </div>\r\n    ];\r\n  }\r\n}\r\ndefine(Example);\r\n```\r\n\r\nAnd here is a React component that uses it:\r\n\r\n```\r\nimport React from 'react';\r\nimport '../Example';\r\n\r\nexport default function ShowExample () {\r\n  return (\r\n    <u-example>\r\n      <h1 slot=\"header\">This is the header</h1>\r\n      <div slot=\"body\">This is the body</div>\r\n      <span slot=\"footer\">This is the footer</span>\r\n    </u-example>\r\n  )\r\n}\r\n```\r\n\r\nPerhaps `reactify(Example)` would help? But wouldn't I still run into the same problem with `slot` not being allowed on `h1`, `div`, and `span` elements.\r\n\r\nWhat pattern or techniques would make this work with React 15.x? Or is there no solution?\r\n"},"comment":{"url":"https://api.github.com/repos/skatejs/skatejs/issues/comments/299317124","html_url":"https://github.com/skatejs/skatejs/issues/1096#issuecomment-299317124","issue_url":"https://api.github.com/repos/skatejs/skatejs/issues/1096","id":299317124,"user":{"login":"morewry","id":1043291,"avatar_url":"https://avatars2.githubusercontent.com/u/1043291?v=3","gravatar_id":"","url":"https://api.github.com/users/morewry","html_url":"https://github.com/morewry","followers_url":"https://api.github.com/users/morewry/followers","following_url":"https://api.github.com/users/morewry/following{/other_user}","gists_url":"https://api.github.com/users/morewry/gists{/gist_id}","starred_url":"https://api.github.com/users/morewry/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/morewry/subscriptions","organizations_url":"https://api.github.com/users/morewry/orgs","repos_url":"https://api.github.com/users/morewry/repos","events_url":"https://api.github.com/users/morewry/events{/privacy}","received_events_url":"https://api.github.com/users/morewry/received_events","type":"User","site_admin":false},"created_at":"2017-05-04T21:40:41Z","updated_at":"2017-05-04T21:40:41Z","body":"> I would definitely ship 2 versions\r\n\r\n@Hotell That's what I was thinking, potentially. Although, in fact, it seems like I could end up distributing more versions than that, what with also needing to support UMD (without burdening users to add or alter pipelines to transpile dependencies) as well as ES Modules.\r\n\r\n> It's probably simpler for the React consumers to simply create their own wrapped createElement and only use it where necessary.\r\n\r\n@treshugart And especially as they use React and I haven't (until this very moment, anyway) they'd be more versed in what, why, and how to best integrate with their own code. \r\n\r\nOTOH, it seems to me I'll shortly get to the point where I'll know in advance based on how the web component I implemented works (e.g. does it have slots? props? events?), so it'd be predictable for me as author and potentially trial-and-error for users. Though good documentation on my end would help there. Worth considering.\r\n\r\nOn which note, I found the recipes portion of the SkateJS docs very useful and it seems like some of this conversation would be useful there. Do you have any contribution guidelines for docs in case I stumble upon the motivation to write some snippets derived from my continued experience?\r\n\r\n> There may have been other things I did as well, it was a fair amount of effort. Honestly, the whole experience getting web components working within React has really soured my opinion of React.\r\n\r\n@tauren Interesting! Despite having my own related reasons for being a bit sour too, I'm actually pretty surprised, because I coulda sworn I'd heard there was a series of PRs that had fixed low hanging fruit web component compatibility issues (into which description whitelisting slot fits); React's docs certainly imply so. But, then, @Hotell's PR _is_ from 7 months ago."}}
{"actor":{"display_login":"morewry"}}