Can't set IFrame and SVG attributes

[heimeshoff]

Trying to implement Youtube Videos and SVGs on a website, yet can't set some properties:

            Html.iframe [ 
              prop.className "videostream"
              prop.src v.url
              prop.allowFullScreen true // Missing Feature in Feliz?
              prop.scrolling "no" // Missing Feature in Feliz?
              prop.frameBorder 0 // Missing Feature in Feliz?

                  Html.svg [ 
                    prop.className "fill-current h-3 w-3" ; 
                    Html.svg.viewBox "0 0 20 20" // Missing Feature in Feliz?
                    Html.svg.xmlns "http://www.w3.org/2000/svg" // Missing Feature in Feliz?
                    prop.children [ 
                      Html.path [ 
                        Html.d "M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" // Missing Feature in Feliz?
                      ]
                    ]
                  ]

[Shmew]

Hi @heimeshoff,

The iframe attributes weren't included for these reasons:

• allowFullScreen - legacy attribute, use allow="fullscreen", looks like allow is missing, I'll submit a PR for that one.
• frameBorder - Deprecated API
• scrolling - Deprecated API

As for the svg items it looks like those are missing.

[Zaid-Ajaj]

Hi @heimeshoff, indeed it looks like the svg properties are not all yet supported with Feliz. Until they become available, you can fallback to using the prop.custom function which makes the properties you want:

Html.svg [
  prop.className "fill-current h-3 w-3"
  prop.custom("viewBox", "0 0 20 20")
  prop.custom("xmlns", "http://www.w3.org/2000/svg")
  prop.children [
    Html.path [ 
        prop.custom("d", "M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z") 
    ]
  ]
]

[heimeshoff]

Awesome, I'll use the workaround and check back in every now and then :)

[Zaid-Ajaj]

@heimeshoff Feel free to also send PRs adding the missing features 😉 these are more than welcome

[Shmew]

Could we leave this issue open? I don't want to lose track of the fact that we need to add these attributes.

[Shmew]

I created a separate issue to track this and any other missing SVG elements/attributes.