JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <head>
  <script type="module">
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';

window.SimpleGreeting = class SimpleGreeting extends LitElement {
  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);
</script>
</head>
<body>
  <h1>A XHTML file with some HTML and xul: elements</h1>
  <p>
    <button onclick="document.body.appendChild(new SimpleGreeting)">document.body.appendChild(new SimpleGreeting)</button> fails with a "XML Parsing Error: not well-formed" exception, which throws "DOMException: An invalid or illegal string was specified" somewhere in lit-core <code>createElement</code>
  </p>
</body>
</html>