Mounting element to svg

[jens-ox]

Hi everyone!

I'd like to mount a lit-element to an existing svg:

<svg>
  <my-element></my-element>
</svg>

I did not manage to get this to work. Instead, I had to move the svg tags to the render function of the element (and remove the svg tags from the html):

import { LitElement, html } from 'lit-element'

class MyElement extends LitElement {
  //...

  render () {
    return html`
      <svg>
        <!-- stuff -->
      </svg>
    `
  }
}

For context, see the d3-lit source, where I want to render an axis to an existing svg.

Is there any way to achieve this? Using svg instead of html from the lit-element package did not work.

[justinfagnani]

This isn't directly possible because custom elements are currently in the HTML namespace, and can't be defined to be in the SVG namespace. See WICG/webcomponents#634

A workaround is to use <foreignObject> and put the custom element inside of it: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

[justinfagnani]

I'm closing because there's really nothing we can do about this on the LitElement side. Please comment on the w3c/webcomponents issue to advocate for SVG-compatible custom elements.

[jens-ox]

Thanks for getting back, makes sense.

[crlmahlberg]

@justinfagnani Thank you for the <foreignObject> workaround. Just one problem there: When I transform:scale() the SVG, it doesn't re-render itself afterwards, meaning that the entire SVG with the LitElement inside gets bigger but also becomes blurry. Text and everything else becomes less clear. That is not the case with pure SVGs. Any idea what's causing this strange behavior and how to fix it?

[justinfagnani]

@crlmahlberg Sorry, I don't know about that. Presumably it's the same for any <foreignObject>.

[crlmahlberg]

@justinfagnani No, it happens to me specifically with a LitElement for some reason. Perhaps a shadow DOM issue? A <button> or a <p> as a <foreignObject>works fine. But thanks anyways!