HTML custom elements for Jupyter notebooks.

notebook.py

"""
Paste this in your notebook after saving the HTML file in the same folder

Tested in VSCode notebooks, Google Colab and Jupyter Lab in Chrome
"""

from IPython.display import HTML
HTML(open("widget.html").read())

widget.html

<script type='module'>

import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';

export class CustomWidget extends LitElement {
  static properties = {
    checked: {},
  };

  constructor() {
    super();
    this.checked = false;
  }

  render() {
    return html`
      <div>
        <input type="text" ?disabled=${!this.checked} value="Hello there.">
      </div>
      <label><input type="checkbox" @change=${
        this.setChecked
      }> Enable editing</label>
    `;
  }

  setChecked(event) {
    this.checked = event.target.checked;
  }
}
customElements.define('custom-widget', CustomWidget);

</script>


<custom-widget />


<style>

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  padding-left: 0.5em;
}

</style>