▸case-07 Inside a custom modal component `<custom-dialog>`, light DOM elements are passed via `<slot>`. The developer placed `role="region"` and `aria-label="Modal Content"` directly onto the `<slot>` element inside the shadow root to make slotted content readable by screen readers. Why is this ineffective and how does `<slot>` behave regarding accessibility? | fail→pass | 11,877 | 12,243 | +3% | 1 | 1 | 0% | 1,994 | 2,226 | +12% | 0 | 0 | — |
▸case-01 I have a custom element `<fancy-input>` with a shadow root containing an `<input>`. In the main Light DOM document, there is `<label id="external-label">Username</label>`. The developer set `<input aria-labelledby="external-label">` inside the shadow DOM. Why is screen reader accessibility failing here, and how should cross-shadow ARIA labeling be handled? | pass→pass | 14,542 | 14,295 | -2% | 1 | 1 | 0% | 2,568 | 2,666 | +4% | 0 | 0 | — |
▸case-02 I am creating a custom form control `<custom-checkbox>` that needs to participate in native HTML `<form>` submission and report validity. The developer added a hidden `<input type="hidden">` inside the shadow root to sync values. What standard Custom Elements API mechanism should be used instead, and what static property must be declared on the element class? | pass→pass | 5,275 | 6,863 | +30% | 1 | 1 | 0% | 981 | 1,429 | +46% | 0 | 0 | — |
▸case-03 A custom search widget `<search-box>` hosts a text `<input>` inside its shadow DOM. Users clicking on the custom host element area outside the input do not focus the inner input, so the developer added `tabindex="0"` and a click listener to the host element. How should focus delegation be handled standardly when attaching the shadow root? | pass→pass | 6,114 | 7,409 | +21% | 1 | 1 | 0% | 1,126 | 1,440 | +28% | 0 | 0 | — |
▸case-04 A custom drop-down element `<custom-dropdown>` dispatches a `change` event from inside its shadow root using `new CustomEvent('change', { bubbles: true })`. However, event listeners on the outer `<form>` element in the main document never receive the event. What property is missing from the event initialization options? | pass→pass | 3,507 | 3,344 | -5% | 1 | 1 | 0% | 601 | 675 | +12% | 0 | 0 | — |
▸case-05 In a custom tab control `<custom-tab>`, the author wants to expose the `tab` ARIA role and `aria-selected` state without polluting the light DOM host element's HTML attributes. They currently manually reflect `role="tab"` to the host attribute in `connectedCallback`. How can this be accomplished without adding host HTML attributes? | pass→pass | 10,176 | 6,941 | -32% | 1 | 1 | 0% | 1,829 | 1,306 | -29% | 0 | 0 | — |
▸case-06 A form-associated custom element `<validated-input>` needs to trigger browser native form validation UI and block form submission when invalid. The developer is calling `this.dispatchEvent(new Event('invalid'))` manually. How should native constraint validation state and error messages be set on a form-associated custom element? | pass→pass | 12,567 | 10,551 | -16% | 1 | 1 | 0% | 2,279 | 2,072 | -9% | 0 | 0 | — |
▸case-08 A design system includes `<custom-field>` which contains a label in light DOM `<label id="field-lbl">First Name</label>` and a child `<custom-input>` element. How can `<custom-input>` reference the light DOM label element programmatically using modern DOM APIs inside the custom element instance? | pass→pass | 13,560 | 10,152 | -25% | 1 | 1 | 0% | 2,443 | 1,867 | -24% | 0 | 0 | — |
▸case-09 In a custom component `<action-card>` configured with shadow root focus delegation, there is a button and an input inside the shadow DOM. When an un-focusable area of the host element receives focus, how does focus delegation determine which inner element gets focused? | pass→pass | 11,297 | 12,003 | +6% | 1 | 1 | 0% | 1,983 | 2,102 | +6% | 0 | 0 | — |
▸case-10 When auditing event propagation for `<custom-button>`, an event listener on `document` reads `event.target` and sees `<custom-button>` instead of the inner `<button>` element inside shadow DOM. The developer believes this is a bug in their custom event dispatch code. Is this behavior standard for shadow DOM events, and how does event target inspection work across shadow boundaries? | pass→pass | 11,412 | 10,540 | -8% | 1 | 1 | 0% | 2,010 | 1,977 | -2% | 0 | 0 | — |
▸case-11 A form-associated custom element `<custom-slider>` needs to react when its enclosing `<fieldset disabled>` becomes disabled. The author added a MutationObserver to watch the parent `<fieldset>` element. What standard custom element lifecycle callback handles form-disabled state changes automatically? | pass→pass | 4,681 | 6,050 | +29% | 1 | 1 | 0% | 782 | 1,144 | +46% | 0 | 0 | — |
▸case-12 When an enclosing `<form>` element fires a `reset` event, `<custom-rating>` does not revert to its default initial value. The developer added a global window event listener for form resets. Which custom element lifecycle callback should be used to handle form resets natively? | pass→pass | 4,020 | 4,881 | +21% | 1 | 1 | 0% | 765 | 961 | +26% | 0 | 0 | — |
▸case-13 A component author called `this.attachInternals()` inside the constructor of `<my-input>`, but calling `internals.setFormValue('test')` throws a TypeError saying the element is not form-associated. What step was missed in the class definition? | pass→pass | 3,831 | 4,359 | +14% | 1 | 1 | 0% | 664 | 872 | +31% | 0 | 0 | — |
▸case-14 In a web component architecture, `<my-tooltip id="tip">` lives in the light DOM next to `<button aria-describedby="tip">Hover me</button>`. The developer wants to move `<my-tooltip>` inside a shadow root, but keep `aria-describedby="tip"` on the light DOM button. Will this ARIA reference continue to work? | pass→pass | 9,535 | 8,430 | -12% | 1 | 1 | 0% | 1,435 | 1,558 | +9% | 0 | 0 | — |
▸case-15 A custom element `<custom-dialog>` has shadow DOM without focus delegation enabled. Calling `dialogElement.focus()` from external JavaScript does not focus anything inside the shadow DOM. How does programmatic focus behavior differ when shadow root focus delegation is disabled versus enabled? | pass→pass | 11,917 | 12,188 | +2% | 1 | 1 | 0% | 2,210 | 2,269 | +3% | 0 | 0 | — |
▸case-16 An author wants to set an accessible label on a custom element `<custom-toggle>` via `ElementInternals` without modifying host element attributes. What property on `ElementInternals` corresponds to the `aria-label` attribute? | pass→pass | 3,248 | 3,944 | +21% | 1 | 1 | 0% | 545 | 852 | +56% | 0 | 0 | — |
▸case-17 A slotted button `<button>Click</button>` is passed into `<custom-card>`'s shadow DOM `<slot></slot>`. The developer is worried that placing the slot inside shadow DOM will disrupt normal keyboard tabbing order for the slotted button. How does slotted Light DOM content participate in the document tab order? | pass→pass | 11,667 | 10,810 | -7% | 1 | 1 | 0% | 1,899 | 1,941 | +2% | 0 | 0 | — |
▸case-18 A developer dispatches a custom event from inside a shadow root with `{ composed: true, bubbles: false }`. They notice that parent elements outside the shadow DOM do not receive the event unless the event target is the host itself. Why does setting `composed: true` without `bubbles: true` fail to propagate up the document tree outside the shadow root? | pass→pass | 10,877 | 17,961 | +65% | 1 | 1 | 0% | 1,839 | 3,087 | +68% | 0 | 0 | — |
▸case-19 A form-associated custom element `<custom-editor>` needs to restore state when browser autofill or browser session history restoration occurs. Which custom element lifecycle callback receives the restored state and reason from the browser? | pass→pass | 3,990 | 4,248 | +6% | 1 | 1 | 0% | 663 | 898 | +35% | 0 | 0 | — |
▸case-20 A custom multi-select component `<custom-multiselect>` needs to submit multiple values under the same input name during HTML form submission. How should `internals.setFormValue()` be invoked to pass multiple form values or entry pairs? | pass→pass | 11,349 | 9,940 | -12% | 1 | 1 | 0% | 1,958 | 1,897 | -3% | 0 | 0 | — |
▸case-21 We are styling a `<custom-card>` web component and want the layout to switch from column to row when the host component's rendered width exceeds 400px, regardless of the browser viewport width. What CSS at-rule should be used inside the shadow DOM style sheet to respond to the host container's width? | pass→pass | 4,286 | 6,647 | +55% | 1 | 1 | 0% | 809 | 1,307 | +62% | 0 | 0 | — |
▸case-22 When bundling a library of Custom Elements with Vite / Rollup, the build outputs duplicate class definitions when multiple components import a shared base utility class. How should Rollup configuration handle shared dependencies in library mode build outputs? | pass→pass | 16,658 | 13,051 | -22% | 1 | 1 | 0% | 2,863 | 2,243 | -22% | 0 | 0 | — |
▸case-23 In a custom table component `<virtual-table>`, updating a monitored attribute causes `attributeChangedCallback` to re-render 1,000 DOM rows synchronously, causing UI jank during rapid slider scrubbing. How should DOM update rendering be scheduled in JavaScript to debounce or batch attribute changes? | pass→fail | 14,266 | 13,681 | -4% | 1 | 1 | 0% | 2,341 | 2,475 | +6% | 0 | 0 | — |