require-data-slot

Part of: componentApi preset (opt-in — not in recommended)

Every named composition part must carry data-slot="<part-name>" so consumers can target sub-elements with CSS selectors like [data-slot="trigger"]. The heuristic: a JSX element that carries data-testid is a named part and must also carry data-slot.

Why This Matters

Issue	Impact	Solution
Styling hooks missing	Consumers cannot target sub-elements without fragile class selectors	Add `data-slot="<part-name>"` to every named part
API surface incomplete	Component does not expose the slot contract documented in the design system	Every `data-testid` element is also a slot

Examples

Incorrect

function Dialog({ "data-testid": testId }) {
  return (
    <div data-testid={testId}>
      <header data-testid="dialog-header">...</header>  {/* missing data-slot */}
    </div>
  );
}

Correct

function Dialog({ "data-testid": testId }) {
  return (
    <div data-testid={testId} data-slot="root">
      <header data-testid="dialog-header" data-slot="header">...</header>
    </div>
  );
}

Configuration

// eslint.config.mjs
export default [
  {
    rules: {
      "react-features/require-data-slot": "error",
    },
  },
];

This rule is part of eslint-plugin-react-features.