Shadow DOM Click Rules Test

Test Setup

What's being tested: Shadow DOM click rules with host_selector + inner_selector

Expected result: Clicks on elements matching a Shadow DOM rule should emit ct: 'rule' and the correct rule ID

Configured rules:

{
  "clicks": {
    "rules": [
      { "id": "shadow-widget-btn", "host_selector": "shadow-widget", "inner_selector": "button.action-btn" },
      { "id": "shadow-card-link", "host_selector": "shadow-card", "inner_selector": "a.card-link" },
      { "id": "shadow-cta-primary", "host_selector": ".shadow-cta-host", "inner_selector": "button[data-cta='primary']" },
      { "id": "nested-shadow-btn", "host_selector": "shadow-nested-outer", "inner_selector": "button.nested-btn" },
      { "id": "standard-rule-btn", "selector": "#standard-rule-target" }  // Non-shadow comparison
    ]
  }
}

Test 1: Shadow DOM Button Rule

shadow-widget with button.action-btn inside

Rule: { id: "shadow-widget-btn", host_selector: "shadow-widget", inner_selector: "button.action-btn" }

Expected: ct: 'rule', rule: 'shadow-widget-btn', shadow: true

Test 2: Shadow DOM Link Rule

shadow-card with a.card-link inside

Rule: { id: "shadow-card-link", host_selector: "shadow-card", inner_selector: "a.card-link" }

Expected: ct: 'rule', rule: 'shadow-card-link', shadow: true

Test 3: Class-based Host Selector

Custom element with .shadow-cta-host class

Rule: { id: "shadow-cta-primary", host_selector: ".shadow-cta-host", inner_selector: "button[data-cta='primary']" }

Expected: ct: 'rule', rule: 'shadow-cta-primary', shadow: true

Test 4: Non-matching Shadow DOM Element

Shadow button that doesn't match any rule

No matching rule - button inside shadow-widget but with class "other-btn" not "action-btn"

Expected: ct: 'button', shadow: true (NO rule match - falls back to button type)

Test 5: Standard Rule (non-Shadow DOM)

Regular button matching a standard selector rule

Rule: { id: "standard-rule-btn", selector: "#standard-rule-target" }

Expected: ct: 'rule', rule: 'standard-rule-btn' (no shadow flag)

Test 6: Closed Shadow DOM (Limitation)

Shadow DOM with mode: 'closed' - cannot be traversed

Note: Even if a rule exists, closed shadow DOM cannot be accessed

Expected limitation: Cannot match rule because shadowRoot is not accessible in closed mode. Click event will be detected but rule cannot match inner elements.

Event Log

Instructions:

Open browser console (F12)
Run: _ll.debug(true)
Click the test elements above
Verify ct: 'rule' and correct rule ID in events

Events: 0

Waiting for events... Click test elements after enabling debug mode.