Plugin: react-featuresRules
require-data-slot
Named composition parts must carry data-slot (R6)
Part of:
componentApipreset (opt-in — not inrecommended)
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.
Use this rule
npm install -D oxlint-plugin-react-features{ "jsPlugins": ["oxlint-plugin-react-features"], "rules": { "react-features/require-data-slot": "error" }}import { defineConfig } from 'vite-plus';export default defineConfig({ lint: { jsPlugins: ['oxlint-plugin-react-features'], rules: { 'react-features/require-data-slot': 'error', }, },});oxlint-plugin-react-features re-exports eslint-plugin-react-features/oxlint: the same rules under the same IDs, and no ESLint install. Why oxlint.
Did this rule catch something? Star the repo to get new CWE coverage as we ship it — or follow the AI-code-security benchmarks behind these rules.