Best practices

Responsive design

Ensure your widget works within the size constraints:

render() {
  const isCompact = this.screen.maxWidth < 300;
  
  return html`
    <div class="plugin-container ${isCompact ? 'compact-mode' : ''}">
      <!-- Responsive content -->
    </div>
  `;
}

Error handling

Implement proper error handling:

private async _performAction() {
  try {
    // Your action logic
  } catch (error) {
    this._showError('Action failed: ' + error.message);
  }
}

private _showError(message: string) {
  this.dispatchEvent(new CustomEvent('widget-error', {
    bubbles: true,
    composed: true,
    detail: { message, pluginId: this.id }
  }));
}

Performance optimisation

• Use Lit's reactive properties efficiently.
• Implement proper lifecycle methods.
• Avoid unnecessary re-renders.

Accessibility

Ensure your widget is accessible:

render() {
  return html`
    <div class="plugin-container" role="application" aria-label="${this.name}">
      <button 
        class="btn btn-primary"
        aria-describedby="analysis-help"
        @click=${this._analyze}
      >
        Analyze
      </button>
      <div id="analysis-help" class="sr-only">
        Performs medical image analysis
      </div>
    </div>
  `;
}

Integration with host applications

Your widget will be loaded as a federated module in host applications. The host will then:

1. Load your remote entry file.
2. Instantiate your web component.
3. Pass the required PluginProps.
4. Handle the callbacks.