browser-iframe-shadow-dom

Diagnose and operate elements nested inside iframes and shadow DOM boundaries.

38|6|Updated Aug 14, 2026
One-click install
npx skills add https://github.com/7757/Fan-Browser-Agent --skill browser-iframe-shadow-dom-7757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-iframe-shadow-dom
Source: https://github.com/7757/Fan-Browser-Agent/tree/main/skills/browser/browser-iframe-shadow-dom
Command: npx skills add https://github.com/7757/Fan-Browser-Agent --skill browser-iframe-shadow-dom-7757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Elements inside iframes or shadow DOM often fail to appear in browser observations or silently ignore actions, leaving automation stuck. This Skill explains how the browser tools route actions into nested contexts and how to recognize the two hard boundaries — cross-origin OOPIF frames and closed shadow roots — that cannot be reached. ## Core Features & Use Cases - Automatic index routing: Act on elements in same-origin iframes and open shadow roots directly by their observed index with browser_click, browser_type, or browser_select. - Boundary diagnosis: Use browser_find_elements, browser_targets, and enriched observation flags to classify whether a missing element is a cross-origin OOPIF or a closed shadow root. - Fallback strategies: Navigate directly to a frame's URL, use a component's public API, or hand off captcha/payment widgets to the human-in-the-loop path instead of thrashing. - Use Case: A checkout page embeds a third-party payment iframe whose fields never appear in the observation; the Skill guides you to confirm the cross-origin boundary via the frame src and report it as undrivable rather than retrying index actions. ## Quick Start Use the browser-iframe-shadow-dom skill to figure out why the button inside this embedded widget is not responding to clicks.

Frequently Asked Questions about browser-iframe-shadow-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I click an element inside an iframe in browser automation?▼

For same-origin iframes, the element appears in the flattened observation with an index, so call browser_click with that index directly. The runtime routes the action into the correct frame automatically; no frame-switching step is needed.

How to interact with elements inside shadow DOM?▼

Open shadow roots are traversed by the observation, so their elements get indices and respond to browser_click or browser_type normally. Closed shadow roots hide their subtree entirely and cannot be reached by index or JavaScript evaluation.

Why is an element visible on screen but missing from browser_observe?▼

The element likely sits inside a cross-origin OOPIF iframe or a closed shadow root, both of which are isolated by the browser. Confirm by checking iframe src attributes with browser_find_elements and target types with browser_targets.

Can JavaScript evaluation access cross-origin iframes or closed shadow roots?▼

No. Page JavaScript is bound by the same-origin policy and cannot read cross-origin frame contents, and closed shadow roots block outside script access by design. Use the component's public API or navigate to the frame URL instead.

What should I do when a captcha or payment iframe cannot be automated?▼

Third-party widgets like captchas and payment fields in cross-origin frames are generally undrivable. Stop retrying index actions and hand the step off to the human-in-the-loop flow so the user completes it manually.