4 ms·

These are web components and work fine within React already. We shouldn't need to port every interesting UI component to every single framework anymore.

swyx 8y ago
i know and it was more just an exercise for myself. polymer and react interop still isnt very nice as far as i can tell. calm down :)
- spankalee 8y ago
  You can just import these into JS modules and use them in JSX. Interop is fine for attributes. I'm perfectly calm dude.
- spicyj 8y ago
  What could we do better?
  - swyx 8y ago
    i don't know. wanna try putting up a codesandbox to use wired-elements in a react app? would love to learn. sorry i dont know your affiliation with the polymer project or react-polymer. it just didnt seem usable when i looked at it
- ergo14 8y ago
  Those elements don't use polymer, they use lit-element - it is from polymer team and uses one polymer mixin, but its not polymer base element.
hugozap 8y ago
>These are web components and work fine within React already I tried with a simple CodeSandbox and they are not working for me. ( Unless I'm doing something wrong? ) https://codesandbox.io/s/pp4q7kw9q7 https://codesandbox.io/s/pp4q7kw9q7
- d4l3k 8y ago
  There's something weird going on in Chrome. This link works in Firefox though with the webcomponents polyfill https://codesandbox.io/s/jn85y61kx9 https://codesandbox.io/s/jn85y61kx9
  - shihn 8y ago
    I believe it's a shadow dom issue. Firefox doesnt support Shadow DOM yet so a 'shady dom' is used by the polyfill
    - e111077 8y ago
      This seems to be because you are accessing the DOM of the element from the constructor which is a no no. Here's a simple repro: https://stackblitz.com/edit/lit-element-react-attributes-location?file=my-element.js https://stackblitz.com/edit/lit-element-react-attributes-loc...
  - swyx 8y ago
    stuff like this is why i have trust issues with people who try to push webcomponents on me. I'm either not smart enough to understand why i dont get it, or its just not ready yet.
  - shihn 8y ago
    All working with react now. There was an issue wired-elements code: Here's a react demo: https://stackblitz.com/edit/wired-elements-react?file=index.js https://stackblitz.com/edit/wired-elements-react?file=index....

swyx 8y ago

i know and it was more just an exercise for myself. polymer and react interop still isnt very nice as far as i can tell. calm down :)

spankalee 8y ago
You can just import these into JS modules and use them in JSX. Interop is fine for attributes. I'm perfectly calm dude.
spicyj 8y ago
What could we do better?
- swyx 8y ago
  i don't know. wanna try putting up a codesandbox to use wired-elements in a react app? would love to learn. sorry i dont know your affiliation with the polymer project or react-polymer. it just didnt seem usable when i looked at it
ergo14 8y ago
Those elements don't use polymer, they use lit-element - it is from polymer team and uses one polymer mixin, but its not polymer base element.

hugozap 8y ago

>These are web components and work fine within React already I tried with a simple CodeSandbox and they are not working for me. ( Unless I'm doing something wrong? ) https://codesandbox.io/s/pp4q7kw9q7 https://codesandbox.io/s/pp4q7kw9q7

d4l3k 8y ago
There's something weird going on in Chrome. This link works in Firefox though with the webcomponents polyfill https://codesandbox.io/s/jn85y61kx9 https://codesandbox.io/s/jn85y61kx9
- shihn 8y ago
  I believe it's a shadow dom issue. Firefox doesnt support Shadow DOM yet so a 'shady dom' is used by the polyfill
  - e111077 8y ago
    This seems to be because you are accessing the DOM of the element from the constructor which is a no no. Here's a simple repro: https://stackblitz.com/edit/lit-element-react-attributes-location?file=my-element.js https://stackblitz.com/edit/lit-element-react-attributes-loc...
- swyx 8y ago
  stuff like this is why i have trust issues with people who try to push webcomponents on me. I'm either not smart enough to understand why i dont get it, or its just not ready yet.
- shihn 8y ago
  All working with react now. There was an issue wired-elements code: Here's a react demo: https://stackblitz.com/edit/wired-elements-react?file=index.js https://stackblitz.com/edit/wired-elements-react?file=index....