How to test
1. Install the Chrome extension
2. Click the extension icon and press "Start Selecting"
3. Click any element on this page
4. Add an annotation and copy in AI format
๐ก Lit Web Components
Custom Elements ยท Shadow DOM๐งฉ Plain DOM (Inspectable)
<button> Standard HTML element โ fully inspectable โ <input> Standard HTML element โ fully inspectable โ <select> Standard HTML element โ fully inspectable โ <textarea> Standard HTML element โ fully inspectable โ <table> Standard HTML element โ fully inspectable โ shadow DOM note
Shadow DOM elements are encapsulated. The extension selects elements in the
light DOM (the custom element host itself).
Use the plain DOM elements on the left for full inspection.
dom-ai-card definition
class DomAiCard extends HTMLElement {
connectedCallback() {
// renders into shadow DOM
this.attachShadow({ mode: 'open' });
// host element IS selectable
}
}