XSS recommendation: Use innerText\textContent instead of innerHTML

I have created a Web Component for a requirement and I have received a The best way to handle this is by not injecting untrusted strings in this way. Instead, use node.innerText or node.textContent to inject the string- the browser will not parse this string at all, preventing an XSS attack. code review comment. I am still thinking about how to replace innerHTML to innerText or textContent.

Would the community have an input?

import RealBase from '../real-base';
import productCardTitleCss from '../../../css/_product-card-title.scss?inline';
import baseCss from '../../../css/_base.scss?inline';
const ESAPI = require('node-esapi');
class RealProductCardTitle extends RealBase {
  constructor() {
    super();
    this.defaultClass = 'real-product-card-title';
  }
  connectedCallback() {
    super.connectedCallback();
    this.render();
  }
  static get observedAttributes() {
    return ['heading', 'form'];
  }
  get heading() {
    return this.getAttribute('heading') || '';
  }
  set heading(value) {
    this.setAttribute('heading', value ? ESAPI.encoder().encodeForHTML(value) : value);
  }
  get form() {
    return this.getAttribute('form') || '';
  }
  set form(value) {
    this.setAttribute('form', value ? ESAPI.encoder().encodeForHTML(value) : value);
  }
  attributeChangedCallback() {
    this.render();
  }
  render() {
    const {
      heading,
      form,
    } = this;
    this.classList.add('real-block');
    this.classList.add(this.defaultClass);
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
    }
    //Recommendation for this line below
    this.shadowRoot.innerHTML = `
      <style>
        ${productCardTitleCss}
        ${baseCss}
      </style>
      <real-heading 
        class="real-product-card-title-heading" 
        input="${heading}">
      </real-heading>
      <div 
        class="real-product-card-title-attributes real-inline-block">
        ${form}
      </div>`;
  }
}
window.customElements.define('real-product-card-title', RealProductCardTitle);

Via Active questions tagged javascript - Stack Overflow https://ift.tt/aYqlT6Q