Expose lit-html's "svg" for creating svg template results.

[theengineear]

See https://lit-html.polymer-project.org/api/modules/lit_html.html#svg

And here's the source: https://github.com/Polymer/lit-html/blob/master/src/lib/template-result.ts#L134-L144

Without svg, you cannot do the following:

static templateCircle(html, circle) {
  return html`
    <!-- This doesn't work, lit-html never sees an svg tag to set context. -->
    <circle cx="${circle.x}" cy="${circle.y}" r="${circle.r}"></circle>
  `;
}

static template(html) {
  return ({ circles }) => {
    return html`
      <svg xmlns="http://www.w3.org/2000/svg">
        <!-- This works, lit-html sees the svg tag and sets context. -->
        <circle cx="0" cy="0" r="10"></circle>
        ${circles.map(circle => this.renderCircle(html, circle))}
      </svg>
    `;
  };
}

The tricky part will be figuring out the correct interface here. Let's update this as we come up with new ideas:

static templateCircle(svg, circle) {
  return svg`
    <circle cx="${circle.x}" cy="${circle.y}" r="${circle.r}"></circle>
  `;
}

static template({ html, svg }) {
  return ({ circles }) => {
    return html`
      <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx="0" cy="0" r="10"></circle>
        ${circles.map(circle => this.renderCircle(svg, circle))}
      </svg>
    `;
  };
}

[theengineear]

Options include:

• template(templates, directives)
• template(html, directives, svg) (i.e., just hide it...)
• Do nothing and require that you import it from lit-html directly...

[klebba]

IMO we would pick the option based on what the prospective code change looks like