HTML Permissions Elements

The Problem: Permission Flows Are Painful

Today, handling location or camera permission requires a lot of JavaScript:

// Current JavaScript-based approach
async function getLocation() {
    try {
        // 1. Check if the API exists
        if (!navigator.geolocation) {
            showFallback("Your browser doesn't support location.");
            return;
        }

        // 2. Check current permission state
        const permission = await navigator.permissions.query({
            name: "geolocation"
        });

        // 3. Handle denied state (need to instruct user)
        if (permission.state === "denied") {
            showRecoveryUI("Enable location in browser settings.");
            return;
        }

        // 4. Request the position
        navigator.geolocation.getCurrentPosition(
            (position) => showMap(position.coords),
            (error) => handleError(error)
        );
    } catch (err) {
        showFallback(err.message);
    }
}

That's ~25 lines of JavaScript just to handle one permission. And this code is repeated on every site that needs location.

The Solution: Native Permission Elements

The proposed elements handle the entire flow declaratively:

<geolocation autolocate>
    <!-- This content renders only when location is granted -->
    <my-map-component></my-map-component>

    <!-- This fallback shows when permission is denied -->
    <fallback>
        <p>Location access is needed to show nearby stores.</p>
        <button onclick="navigator.permissions.request... ">
            Try again
        </button>
    </fallback>
</geolocation>

What the browser handles for you:

• Showing the permission prompt.
• Rendering the content when granted.
• Rendering fallback when denied.
• Remembering the user's choice across visits.
• Integrating with browser-level site settings for recovery.

The geolocation Element

<geolocation autolocate>
    <nearby-stores></nearby-stores>

    <fallback>
        <p>We need your location to find nearby stores.</p>
        <button id="retry-location">Enable location</button>
    </fallback>
</geolocation>

Attributes:

• autolocate — requests permission as soon as the element renders.
• Without it, the element waits for a user gesture to trigger the prompt.

Children:

• Default content — shown when permission is granted.
• <fallback> — shown when permission is denied.

The usermedia Element

<usermedia autoplaycamera audio>
    <video id="preview" autoplay playsinline></video>
    <button id="capture">Capture Photo</button>

    <fallback>
        <p>Camera access is needed for this feature.</p>
        <button id="retry-camera">Enable camera</button>
    </fallback>
</usermedia>

Attributes:

• autoplaycamera — requests camera permission immediately.
• audio — also requests microphone access.

Children: Same as <geolocation> — default content plus optional <fallback>.

What This Replaces

Here's the same feature with the current JavaScript approach vs the native elements: