The Future of HTML

<!-- Simple popover without JavaScript --&gt;
<button popovertarget="my-popover">Show Popover</button>

<div id="my-popover" popover>
    <h2>Popover Content</h2>
    <p>This is a native popover!</p>
    <button popovertarget="my-popover" popovertargetaction="hide">
        Close
    </button>
</div>

<!-- Benefits:
   - No JavaScript needed for basic popovers
   - Automatic z-index management
   - Built-in dismiss behavior (Esc key, click outside)
   - Accessibility built-in --&gt;

<dialog id="myDialog">
    <h2>Dialog Title</h2>
    <p>Dialog content</p>
    <form method="dialog">
        <button value="cancel">Cancel</button>
        <button value="confirm">Confirm</button>
    </form>
</dialog>

<button onclick="myDialog.showModal()">Open Dialog</button>

<script>
const dialog = document.getElementById('myDialog');

// Show as modal (with backdrop)
dialog.showModal();

// Or show as regular dialog
dialog.show();

// Listen for close
dialog.addEventListener('close', () => {
    console.log('Dialog closed with:', dialog.returnValue);
});
</script>

<!-- Native lazy loading for images --&gt;
<img src="image.jpg" loading="lazy" alt="Description">

<!-- Also works for iframes --&gt;
<iframe src="video.html" loading="lazy"></iframe>

<!-- Values:
   - lazy: Load when near viewport
   - eager: Load immediately
   - auto: Browser decides --&gt;

<!-- Accordion without JavaScript --&gt;
<details>
    <summary>Click to expand</summary>
    <p>Hidden content that appears when expanded.</p>
</details>

<details open>
    <summary>This is open by default</summary>
    <p>Content visible from the start.</p>
</details>

<!-- Can be styled with CSS --&gt;
<style>
details {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

summary {
    cursor: pointer;
    font-weight: bold;
}

details[open] summary {
    color: #4CAF50;
}
</style>

<!-- Future: Customizable select element --&gt;
<selectlist>
    <button slot="button">
        <span behavior="selected-value"></span>
        <span>â–¼</span>
    </button>
    <listbox slot="listbox">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </listbox>
</selectlist>

<!-- Fully styleable with CSS, unlike current <select> --&gt;

<!-- Future: Declarative interactions --&gt;
<button invoketarget="my-dialog" invokeaction="showModal">
    Open Dialog
</button>

<dialog id="my-dialog">
    <h2>Dialog</h2>
    <button invoketarget="my-dialog" invokeaction="close">
        Close
    </button>
</dialog>

<!-- No JavaScript needed for common interactions --&gt;

<!-- HTML --&gt;
<div class="card-container">
    <div class="card">
        <h2>Card Title</h2>
        <p>Content...</p>
    </div>
</div>

<style>
.card-container {
    container-type: inline-size;
    container-name: card;
}

/* Query based on container width */
@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}
</style>

<!-- Smooth page transitions --&gt;
<script>
async function navigateWithTransition(url) {
    // Start view transition
    const transition = document.startViewTransition(async () => {
        // Update DOM
        await updateContent(url);
    });
    
    // Wait for transition to complete
    await transition.finished;
}
</script>

<style>
/* Customize transition */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}
</style>

// Read/write local files
async function openFile() {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log(contents);
}

async function saveFile() {
    const fileHandle = await window.showSaveFilePicker();
    const writable = await fileHandle.createWritable();
    await writable.write('Hello, World!');
    await writable.close();
}

async function shareContent() {
    if (navigator.share) {
        await navigator.share({
            title: 'Check this out!',
            text: 'Amazing content',
            url: 'https://example.com'
        });
    }
}

async function processPayment() {
    const request = new PaymentRequest(
        [{ supportedMethods: 'basic-card' }],
        {
            total: {
                label: 'Total',
                amount: { currency: 'USD', value: '10.00' }
            }
        }
    );
    
    const response = await request.show();
    await response.complete('success');
}

async function connectBluetooth() {
    const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['battery_service'] }]
    });
    
    const server = await device.gatt.connect();
    const service = await server.getPrimaryService('battery_service');
    const characteristic = await service.getCharacteristic('battery_level');
    const value = await characteristic.readValue();
    
    console.log('Battery:', value.getUint8(0), '%');
}

/* Style parent based on child */
div:has(> img) {
    border: 2px solid #4CAF50;
}

/* Style form based on invalid input */
form:has(:invalid) {
    border-color: red;
}

/* Card with badge */
.card:has(.badge) {
    padding-top: 40px;
}

<style>
.card {
    padding: 20px;
    
    & h2 {
        color: blue;
    }
    
    & .description {
        color: gray;
        
        & a {
            color: green;
        }
    }
    
    &:hover {
        background: #f5f5f5;
    }
}
</style>

<style>
@scope (.card) {
    h2 {
        color: blue;
    }
    
    p {
        color: gray;
    }
}

/* Styles only apply inside .card elements */
</style>

<!-- Load WebAssembly module --&gt;
<script>
async function loadWasm() {
    const response = await fetch('module.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(buffer);
    
    // Call WASM functions
    const result = module.instance.exports.add(5, 3);
    console.log('Result:', result); // 8
}
</script>

<!-- Use cases:
   - Image/video processing
   - Games and 3D graphics
   - Scientific computing
   - Porting desktop apps to web --&gt;

<!-- Run ML models in browser --&gt;
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script>
async function classifyImage(imageElement) {
    // Load pre-trained model
    const model = await tf.loadGraphModel('model.json');
    
    // Convert image to tensor
    const tensor = tf.browser.fromPixels(imageElement);
    
    // Run prediction
    const predictions = await model.predict(tensor);
    console.log(predictions);
}
</script>