[Fix] no-unknown-property: children is always an acceptable prop; iframes have scrolling; video has playsInline

Author: ljharb

CHANGELOG.md

@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add properties `onToggle`, `fill`, `as`, and pointer events ([#3385][] @sjarva)
 * [`no-unknown-property`]: add `defaultChecked` property ([#3385][] @sjarva)
 * [`no-unknown-property`]: add touch and media event related properties ([#3385][] @sjarva)
+* [`no-unknown-property`]: `children` is always an acceptable prop; iframes have `scrolling`; ; video has `playsInline` ([#3385][] @ljharb)
 
 [#3385]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3385
 

lib/rules/no-unknown-property.js

@@ -79,6 +79,8 @@ const ATTRIBUTE_TAGS_MAP = {
   onTimeUpdate: ['audio', 'video'],
   onVolumeChange: ['audio', 'video'],
   onWaiting: ['audio', 'video'],
+  scrolling: ['iframe'],
+  playsInline: ['video'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -195,7 +197,7 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
   // OpenGraph meta tag attributes
   'property',
   // React specific attributes
-  'ref', 'key',
+  'ref', 'key', 'children',
 ];
 
 const DOM_PROPERTY_NAMES_TWO_WORDS = [

tests/lib/rules/no-unknown-property.js

@@ -48,12 +48,15 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<img src="cat_keyboard.jpeg" alt="A cat sleeping on a keyboard" />' },
     { code: '<input type="password" required />' },
     { code: '<input ref={this.input} type="radio" />' },
+    { code: '<div children="anything" />' },
+    { code: '<iframe scrolling="?" />' },
     { code: '<input key="bar" type="radio" />' },
     { code: '<button disabled>You cannot click me</button>;' },
     { code: '<svg key="lock" viewBox="box" fill={10} d="d" stroke={1} strokeWidth={2} strokeLinecap={3} strokeLinejoin={4} transform="something" clipRule="else" x1={5} x2="6" y1="7" y2="8"></svg>' },
     { code: '<g fill="#7B82A0" fillRule="evenodd"></g>' },
     { code: '<meta property="og:type" content="website" />' },
     { code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
+    { code: '<video playsInline />' },
     // React related attributes
     { code: '<div onPointerDown={this.onDown} onPointerUp={this.onUp} />' },
     { code: '<input type="checkbox" defaultChecked={this.state.checkbox} />' },