Fork me on GitHub

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

   {:__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.


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


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();


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.


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.


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

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


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.


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


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


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


what doesn't work?


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


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.