Fork me on GitHub
#reagent
<
2022-06-11
>
mjmeintjes08:06:52

I need some help rendering a web component using reagent. This works:

[:div 
  {:dangerouslySetInnerHTML
   {:__html "<youtube-video src=''>"}}]
But this does not work:
[:youtube-video {:src ""}]
In the second example, It seems that the web component attributes are empty when the class is constructed.

p-himik08:06:57

Do you see any errors/warnings in the JS console in your browser?

mjmeintjes08:06:41

No, but if I put a breakpoint in the constructor, the element seems to have no attributes:

class o extends HTMLElement {
  constructor() {
    super(), this.attachShadow({
      mode: "open"
    }), this.shadowRoot.appendChild(e.content.cloneNode(!0));
    const t = this.getAttribute("src");

// HERE t is null, and this.outerHTML is "<youtube-video></youtube-video>"

    this.onPlayerReadyQueue = [], t && this.load();
  }

p-himik08:06:21

Interesting. There are a couple of open issues in Reagent's bug tracker about allowing custom elements. Seems like in the mean time, you can either keep on using :dangerouslySetInnerHTML or use JS interop with React to directly create a React element.

mjmeintjes08:06:13

Thanks. It's strange, because the final html renders as <youtube-video src=""></youtube-video> It must be something to do with reagent creating the element and then setting the attributes instead of creating it in one go.

mjmeintjes08:06:49

Got it - it was more a react problem than a reagent problem. This seems to be working now:

[:youtube-video {:src ""
                 :ref #(when % (.load %))}]

p-himik08:06:04

Ah, so then custom elements are supported..? I haven't read those issues thoroughly, maybe there are some aspects of them that don't work that well.

p-himik08:06:53

BTW you should add ^js in front of that % to avoid potential externs issues with .load. Also, could rewrite it as #(some-> ^js % .load).

Oliver Marks13:06:06

Any one know how to handle these ? using fe-blend does not work, do these need to be added into reagent as supported nodes to silence the warnings I get the same for turbulence ?

Warning: <feBlend /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements

lilactown15:06:50

are you using a custom renderer ?

Oliver Marks18:06:04

nope straight up reagent but the nodes above are embeded svg nodes, most work fine but those do not, probably others as well, but those are the ones I am aware of at the moment

lilactown19:06:42

how are you using fe-blend? [:fe-blend ,,,]?

Oliver Marks19:06:50

yeah that's what I tried it stops blending though, if I use :feBlend it works I just get the warning

Oliver Marks19:06:56

[:feTurbulence {:type "turbulence" :base-frequency "0.05" :num-octaves "3" :result "turbulence"}]
this works with warnings
[:fe-turbulence {:type "turbulence" :base-frequency "0.05" :num-octaves "3" :result "turbulence"}]
this how ever does not work at all for me

Oliver Marks19:06:53

same for :feDisplacementMap and :feBlend

lilactown22:06:02

what doesn't work?

lilactown22:06:00

that warning doesn't look like a reagent thing, it looks like a React warning

lilactown22:06:04

what version of react are you using?

Oliver Marks12:06:43

^17.0.2 I had not considered it may have been a react issue, I will explore that avenue I figured it was more a hiccup to react conversion thing.