Web Component Blocks

​

What You Can Do

• Drop in any web component that follows the standard custom-element pattern
• Configure custom inputs (attributes) for your component using the schema input editor
• Copy and paste a Web Component block to other pages
• Copy an AI prompt — a built-in utility that generates a ready-to-use prompt (with your configured inputs) so you can offload web component creation to an LLM

​

Defining a Web Component

export default class extends HTMLElement {
  static observedAttributes = [/* e.g. "title" */];

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const value = this.getAttribute("title") ?? "";
    this.shadowRoot.innerHTML = `
      <style>:host{display:block}</style>
      <div>${value}</div>
    `;
  }
}

​

Use Cases

• Bespoke visualizations — render a chart, gauge, or diagram tailored to your data
• Embedded widgets — calculators, sliders, or interactive elements not covered by built-in blocks
• Brand-specific UI — components that match a design system exactly

​

Current Limitations

• $ref nested block support
• Persisting Web Component blocks in the block palette
• AI assistant integration

​

Next Steps