Stencil: To render string to HTMLElement

[motss]

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected]
└── @stencil/[email protected]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Is there a way to render a string into HTMLElement in Stencil? Not sure if there is a way as it is not obvious enough to find any API available from the documentation.

Expected behavior:

Expecting string to be rendered into HTMLElement.

Steps to reproduce:

Related code:

import {
  Component,
  Prop,
} from '@stencil/core';

@Component({
  tag: 'app-icon',
  styleUrl: '../styles/app-icon.scss',
})

export class AppIcon {
  @Prop() icon: string;

  render() {
    return (
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block; width: 100%; height: 100%;" class={`app-icon ${this.icon ? `${this.icon}-icon` : ''}`}>
        {this.icon ? AppIcon.getIconByIconName(this.icon) : null}
      </svg>
    );
  }

  static getIconByIconName(iconName: string) {
    return AppIcon.ICON_MAPS.has(iconName)
      ? AppIcon.ICON_MAPS.get(iconName)
      : '';
  }

  static get ICON_MAPS() {
    return new Map([
      [
        'search',
        '<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></g>'
      ]
    ]);
  }
};

Other information:

[adamdbradley]

Did you try innerHTML as a property within a JSX element?

[motss]

@adamdbradley

Never know that. I'm not familiar with JSX and have been a Polymer user for very long time.
Found out Stencil from the Polymer Summit and it'd like to try Stencil out as it's totes awesome to see your team marrying JSX, VDOM with Web Components.

Will try it and let you know.

[adamdbradley]

Great thanks. Admittedly we're lacking on docs, so any help would be appreciated. Thanks

[jgw96]

@motss any luck ?

[motss]

@jgw96 @adamdbradley Not sure if it works on SVGElement. But seems like it is still returning a string and the situation is worsen. Now it instead set my innerHTML into an attribute.

Did I do something wrong here?

import {
  Component,
  Prop,
} from '@stencil/core';

@Component({
  tag: 'app-icon',
  styleUrl: '../styles/app-icon.scss',
})

export class AppIcon {
  @Prop() icon: string;

  render() {
    return (
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block; width: 100%; height: 100%;" class={`app-icon ${this.icon ? `${this.icon}-icon` : ''}`} innerHTML={this.icon ? AppIcon.getIconByIconName(this.icon) : null}></svg>
    );
  }

  static getIconByIconName(iconName: string) {
    return AppIcon.ICON_MAPS.has(iconName)
      ? AppIcon.ICON_MAPS.get(iconName)
      : '';
  }

  static get ICON_MAPS() {
    return new Map([
      [
        'search',
        '<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></g>'
      ]
    ]);
  }
};

It will still a string. See the screenshot below.

[jthoms1]

It appears that innerHTML will not work for svgs, this might be resolved in #203. I will write some tests for this and create a fix. Thanks!