LitElement render problem using SVG strings to construct nested SVGs

Question

I have a collection of SVG strings all with different viewBox attributes. I am trying to nest all of these SVGs within a parent SVG in a way that I can dynamically set their x and y attributes. Below is a minimal example of the solution I came up with. It doesn't render initially, however if in the browser devtools I add something like a blank line to the HTML, this seems to cause a re-render and the circles are rendered as expect. So the structure of the HTML produce is correct, it seems to be a problem LitElement/lit-html rendering before my code is "finished".

I suspect the problem boils down to the way I am using templates with lit-html, and the LitElement and SVG aspects are irrelevant.

import { LitElement, svg } from "https://unpkg.com/lit-element?module";

const circles = {
  big: ``,
  small: ``
};

class MyExample extends LitElement {
  render() {
    return svg`
      
        
      
    `;
  }
}

window.customElements.define("my-example", MyExample);

user_2346420 · Answer

it really depends on where your circles come from... assuming all have a width and height of "300px" you can simply wrap your SVGs into another SVG that gets the position and size assigned in the loop. Then just add your SVGs with unsafeHTML (that is assuming you trust the source of your SVG strings)

import { LitElement, svg } from 'https://unpkg.com/lit-element?module'
import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js?module'

const circles = {
  big: ``,
  small: ``
 }

class MyExample extends LitElement {
  doSomething(evt){
    const index = evt.target.getAttribute("data-index")
    // do something with circle i
  }
  render () {
    return svg`
      
        
      
    `
  }
}

window.customElements.define('my-example', MyExample)

another way to do this is to use a DOMParser to parse your strings to a DOM, manipulate that DOM and then turn the result back to a string to render it in the render function (that is if your SVGs do not have the same width and heigh set, and it is not possible to remove the width and height Attributes):

import { LitElement, svg } from 'https://unpkg.com/lit-element?module'
import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js?module'

const circles = {
  big: ``,
  small: ``
}

function setPosition (node, x, y, width, height) {
  node.setAttribute('x', x)
  node.setAttribute('y', y)
  node.setAttribute('width', width)
  node.setAttribute('height', height)
}

class MyExample extends LitElement {
  render () {
    const parser = new DOMParser()
    return svg`
      
        
      
    `
  }
}

window.customElements.define('my-example', MyExample)

it really depends on where the data is coming from and what steps you can do to prepare the data... the most elegant solution would be to turn your SVG strings into template-string-returning functions. then the render function becomes really simple:

import { LitElement, svg } from 'https://unpkg.com/lit-element?module'

const circles = {
  big: (x, y, w, h) => svg``,
  small: (x, y, w, h) => svg``
}

class MyExample extends LitElement {
  render () {
    const parser = new DOMParser()
    return svg`
      
        
      
    `
  }
}

window.customElements.define('my-example', MyExample)

following the logic (of creating a new svg element and appending the circle from your svg strings) you use in your example will only work with the all new unsafeSVG() directive which is new in the unfinished lit-html version 1.2.0... i'm happening to host a build of that so you can try this as well:

import { LitElement, svg } from 'https://cdn.klimapartner.net/modules/lit-element/lit-element.js'
import { unsafeSVG } from 'https://cdn.klimapartner.net/modules/lit-html/directives/unsafe-svg.js'

const circles = {
  big: ``,
  small: ``
}

class MyExample extends LitElement {
  render () {
    const parser = new DOMParser()
    return svg`
      
        
      
    `
  }
}

window.customElements.define('my-example', MyExample)

LitElement render problem using SVG strings to construct nested SVGs

1 Answers