From e56b91a3bef0578565848fbb7dcbdae3fc9f6386 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Fri, 5 Aug 2022 12:05:56 -0700
Subject: [PATCH 01/11] RFC: Reduce API fragmentation across platforms

---
 proposals/0000-reduce-fragmentation.md | 340 +++++++++++++++++++++++++
 1 file changed, 340 insertions(+)
 create mode 100644 proposals/0000-reduce-fragmentation.md

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
new file mode 100644
index 00000000..bf449a51
--- /dev/null
+++ b/proposals/0000-reduce-fragmentation.md
@@ -0,0 +1,340 @@
+---
+title: Reduce API fragmentation across platforms
+author:
+- Nicolas Gallagher
+date: 2021-08-03
+---
+
+# RFC: Reduce API fragmentation across platforms
+
+## Summary
+
+This is a proposal to incrementally reduce the API fragmentation faced by developers using React Native to target multiple platforms, and sharing code between native and web. Each proposed change is additive and can be tackled relatively independently. The aim is to avoid needing to migrate existing React Native code, and to make deprecations an optional and future part of this work.
+
+## Motivation
+
+React Native currently includes many APIs that are modelled on Web APIs but do not conform to the standards of those Web APIs. React Native also includes many APIs that achieve the same results on Android and iOS but are exposed as 2 different props. And React Native includes several APIs that have known performance (network and runtime) drawbacks on Web.
+
+This proposal aims to allow developers to target more platforms with cross-platform APIs, and deliver better performance when targeting browsers. Features for Android, iOS, and Web are unified by aligning with the Web standard to a) minimize the overhead when running in browsers, and b) reduce developer education required to learn these features.
+
+## Detailed design
+
+Many of these additions are already in progress and have been proven in a user-space shim at Meta. The features that cannot be shimmed are explicitly called out below. Those features require core changes to React Native. Other features can be shimmed in user-space JavaScript if desired (with any associated performance cost of doing so).
+
+### New common props
+
+Certain props common to all core components have direct equivalents in React DOM. We should support those props where possible. For example, many of the existing `accessibility*` props in React Native are currently mapped to `aria-*` equivalents by React Native for Web. Supporting the ARIA interface would allow more ARIA-targeting React DOM libraries to work on React Native.
+
+* ARIA props
+  * `aria-busy` is the same as `accessibilityState.busy`.
+  * `aria-checked` is the same as `accessibilityState.checked`.
+  * `aria-disabled` is the same as `accessibilityState.disabled`.
+  * `aria-expanded` is the same as `accessibilityState.expanded`.
+  * `aria-hidden` is the same as `accessibilityElementsHidden` (iOS) / `importantforAccessibility` (Android).
+  * `aria-label` is the same as `accessibilityLabel`.
+  * `aria-live` is the same as `accessibilityLiveRegion` (with `'off'` value changed to `'none'`).
+  * `aria-modal` is the same as `accessibilityViewIsModal`.
+  * `aria-selected` is the same as `accessibilityState.selected`.
+  * `aria-valuemax` is the same as `accessibilityValue.max`.
+  * `aria-valuemin` is the same as `accessibilityValue.min`.
+  * `aria-valuenow` is the same as `accessibilityValue.now`.
+  * `aria-valuetext` is the same as `accessibilityValue.text`.
+  * `role` is the same as `accessibilityRole` (with support for web values).
+  * See prior work: [RFC Accessibility APIs](https://github.com/react-native-community/discussions-and-proposals/pull/410/files).
+* Add `dir` prop to configure element's layout / writing direction.
+* Make `id` the same as `nativeID`.
+* Make `onAuxClick` the same as React DOM `onAuxClick` PointerEvent (can't be shimmed).
+* Make `onClick` the same as React DOM `onClick` as PointerEvent (can't be shimmed).
+* Make `onPointer*` props that same as React DOM PointerEvent props (can't be shimmed).
+  * The Android and iOS implementation is currently being developed by Meta.
+* Make `tabIndex` the same as React Native `focusable` prop.
+  * Add support for `0` and `-1` values only.
+
+Example:
+
+```jsx
+<View
+  aria-hidden={false}
+  aria-label="Accessibility label"
+  id="native-id"
+  onClick={handleDOMClick}
+  onPointerDown={handlePointerDown}
+  role="button"
+  tabIndex={0}
+>
+```
+
+### New props for `<Image>`
+
+Various React DOM `img` props also have direct equivalents in React Native. For example, `srcSet` is a subset of the `source` prop. Features like alternative text content are also required to target web.
+
+* Add `alt` prop for alternative text support.
+* Add `crossOrigin` prop to declaratively configure cross-origin permissions for loaded images. Equivalent to setting the relevant `Header` in the `source` object.
+* Add `referrerPolicy` to declaratively configure referrer policy. Equivalent to setting the relevant `Header` in the `source` object.
+* Make `src` that same as setting `source.uri`.
+* Make `srcSet` the same as setting a `source` array with `uri` and `scale` properties defined.
+* Add `tintColor` prop.
+  * Image currently sets `tintColor` via the inclusion of a non-standard style property.
+  * Recommend adding `tintColor` prop to replace the React Native style property, to avoid the need to parse out `tintColor` from style for platforms like web.
+
+`srcSet` to `source` mapping:
+
+```js
+const { crossOrigin, referrerPolicy, srcSet } = props;
+const source = [];
+const srcList = srcSet.split(', ');
+srcList.forEach((src) => {
+  const [uri, xscale] = src.split(' ');
+  const scale = parseInt(xscale.split('x')[0], 10);
+  const headers = {};
+  if (crossOrigin === 'use-credentials') {
+    headers['Access-Control-Allow-Credentials'] = true;
+  }
+  if (referrerPolicy != null) {
+    headers['Referrer-Policy'] = referrerPolicy;
+  }
+  source.push({ headers, height, scale, uri, width });
+});
+```
+
+Example:
+
+```jsx
+<Image
+  alt="Alternative text"
+  crossOrigin="anonymous"
+  srcSet="https://image.png 1x, https://image2.png 2x"
+  tintColor="purple"
+>
+```
+
+### New props for `<TextInput>`
+
+* Redefine `autoComplete` prop.
+  * Unify values for Android (`autoComplete`) and iOS (`textContentType`) with Web (`autoComplete`).
+  * See below for example mapping
+* Add `enterKeyHint` prop and map to equivalent `returnKeyType` values.
+* Add `inputMode` prop and map to equivalent `keyboardType` values.
+  * `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`
+  * `inputMode === 'email'` is the same as `keyboardType = 'email-address'`
+  * `inputMode === 'numeric'` is the same as `keyboardType = 'numeric'`
+  * `inputMode === 'search'` is the same as `keyboardType = 'search'`
+  * `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`
+  * `inputMode === 'url'` is the same as `keyboardType = 'url'`
+* Make `readOnly` the same as `editable` (inverse).
+* Make `rows` the same as `numberOfLines`.
+  * Support auto-expanding textarea on native platforms.
+
+`autoComplete` mapping:
+
+```js
+// https://reactnative.dev/docs/textinput#autocomplete-android
+const autoCompleteAndroid = {
+  'address-line1': 'postal-address-region',
+  'address-line2': 'postal-address-locality',
+  bday: 'birthdate-full',
+  'bday-day': 'birthdate-day',
+  'bday-month': 'birthdate-month',
+  'bday-year': 'birthdate-year',
+  'cc-csc': 'cc-csc',
+  'cc-exp': 'cc-exp',
+  'cc-exp-month': 'cc-exp-month',
+  'cc-exp-year': 'cc-exp-year',
+  'cc-number': 'cc-number',
+  country: 'postal-address-country',
+  'current-password': 'password',
+  email: 'email',
+  name: 'name',
+  'additional-name': 'name-middle',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
+  'honorific-prefix': 'namePrefix',
+  'honorific-suffix': 'nameSuffix',
+  'new-password': 'password-new',
+  off: 'off',
+  'one-time-code': 'sms-otp',
+  'postal-code': 'postal-code',
+  sex: 'gender',
+  'street-address': 'street-address',
+  tel: 'tel',
+  'tel-country-code': 'tel-country-code',
+  'tel-national': 'tel-national',
+  username: 'username'
+};
+
+// https://reactnative.dev/docs/textinput#textcontenttype-ios
+const autoCompleteIOS = {
+  'address-line1': 'streetAddressLine1',
+  'address-line2': 'streetAddressLine2',
+  'cc-number': 'creditCardNumber',
+  'current-password': 'password',
+  country: 'countryName',
+  email: 'emailAddress',
+  name: 'name',
+  'additional-name': 'middleName',
+  'family-name': 'familyName',
+  'given-name': 'givenName',
+  nickname: 'nickname',
+  'honorific-prefix': 'name-prefix',
+  'honorific-suffix': 'name-suffix',
+  'new-password': 'newPassword',
+  off: 'none',
+  'one-time-code': 'oneTimeCode',
+  organization: 'organizationName',
+  'organization-title': 'jobTitle',
+  'postal-code': 'postalCode',
+  'street-address': 'fullStreetAddress',
+  tel: 'telephoneNumber',
+  url: 'URL',
+  username: 'username'
+};
+```
+
+Example:
+
+```jsx
+<TextArea
+  autoComplete="email"
+  inputMode="email"
+/>
+
+<TextArea
+  multiline
+  readOnly
+  rows={3}
+/>
+```
+
+### New styles
+
+* CSS Custom Properties
+  * Support CSS custom property syntax `--variable-name`.
+  * This can be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
+* CSS Lengths
+  * Support `em`, `rem`, `v*`, `px` length units.
+  * This can be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide ancestral font-size information for `rem` values.
+* CSS Colors
+  * Support CSS Colors using [Colorjs.io](https://colorjs.io/).
+  * This can be shimmed in user-space.
+* CSS Media Queries
+  * Support CSS Media Queries. Although Media Queries are not a preferred long-term solution, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers.
+  * This can be shimmed in user-space on top of the existing `StyleSheet` API.
+* CSS Logical Properties
+  * Support CSS logical property names, i.e., `paddingInlineStart` rather than only non-standard `paddingStart`.
+  * Support subtree-level logical properties, where setting the `dir` prop to `ltr` or `rtl` alters the way logical properties are resolved. Currently, React Native only supports global writing direction configuration for Android.
+* CSS Animations
+  * Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`.
+  * See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
+* CSS Transitions
+  * Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`.
+  * Support `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, and `transitionDelay` (see [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)).
+* `aspectRatio`
+  * Support string values, i.e., `'16 / 9'`, to align with CSS.
+* `backgroundImage`
+  * Support setting background images via `url()`.
+  * Optional: support CSS gradients.
+* `boxShadow`
+  * Add native support for CSS box shadows.
+  * This would replace the very buggy iOS-specific `shadow*` styles and Android `elevation` style, allowing developers to unify shadows across native and web platforms.
+* `filter`
+ * Support declarative filters per [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
+* `fontVariant`
+  * Support space-separated string values to align with CSS.
+* `fontWeight`
+  * Support number values to align with React DOM / CSS.
+* `lineClamp`
+  * Support CSS clamping text to a set number of lines via style.
+  * This would be equivalent to using the `numberOfLines` prop on `<Text>` components.
+* `objectFit`
+  * Support CSS `objectFit` property for `<Image>`.
+  * This would be a subset (no "repeat" keyword) of functionality currently supported by the `resizeMode` prop and style for `<Image>`.
+  * `objectFit === 'contain'` => `resizeMode = 'contain'`
+  * `objectFit === 'cover'` => `resizeMode = 'cover'`
+  * `objectFit === 'fill'` => `resizeMode = 'stretch'`
+  * `objectFit === 'scale-down'` => `resizeMode = 'contain'`
+* `pointerEvents`
+  * Support setting the `pointerEvents` values via style rather than a prop.
+  * Retain the React Native specific `box-none` and `box-only` values.
+* `textShadow`
+  * Add native support for CSS text shadows.
+* `transform`
+  * Support using string values to set transforms.
+  * This can be shimmed in user-space with a parser.
+* `verticalAlign`
+  * Make `verticalAlign` the same as `textAlignVertical`.
+  * `verticalAlign === 'middle'` is the same as `textAlignVertical = 'center'`;
+* `userSelect`
+  * Support setting ability to select text via style.
+  * Equivalent to using `selectable` prop on `<Text>`.
+
+```jsx
+<View
+  style={{
+    boxShadow: '1px 1px 1px 1px #eee',
+    backgroundColor: 'hsla(50,50,50,0.5)',
+    pointerEvents: 'none',
+    transform: 'scale(0.9)',
+    width: '5rem'
+  }}
+>
+
+<Text
+  style={{
+    lineClamp: 3,
+    userSelect: 'none',
+    verticalAlign: 'middle'
+  }}
+>
+
+<Image
+  style={{
+    objectFit: 'cover'
+  }}
+>
+```
+
+### New imperative APIs
+
+* `EventTarget` API
+  * The `EventTarget` API is implemented in JS environments, and should be available on React Native host elements. This feature is commonly used on web, and could be used by React Native developers to support more complex features without first requiring further core API changes to support each use case.
+  * Promote `node.unstable_addEventListener`, `node.unstable_removeEventListener` to stable APIs.
+  * Add `node.dispatchEvent` support.
+  * This cannot be shimmed in user-space.
+* `node.getBoundingClientRect`
+  * Synchronous element measurement API. Current APIs like `node.measure` are async and return slightly different information to what you expect from `getBoundingClientRect` on web.
+  * This cannot be shimmed in user-space.
+
+### Other
+
+* Revisit the type of all events modeled on W3C events. For example, `onTouchStart` should receive an event object that conforms to that received by the same prop in React DOM.
+* Aim to deprecate `StyleSheet.flatten()`.
+  * This API encourages runtime introspection of styles in render calls. This pattern is a performance cost (flattening arrays of objects), and prevents us from supporting build-time optimizations for web (extracting styles to CSS files).
+* Aim to deprecate `StyleSheet.compose()`.
+  * This API has no real value.
+* Aim to restore obfuscation of styles passed to `StyleSheet.create()`.
+  * Returning the styles from create calls encourages introspection of those styles. On web, we need to be able to remove the JavaScript style objects from bundles to support build-time optimization like extraction to CSS files.
+* Aim to deprecate the `Touchable*` components.
+  * The `Pressable` component was shipped as a replacement for `Touchable*`.
+* Aim to support more interaction states with `Pressable`.
+  * Add ‘hovered’ and ‘focused’ to the state object, and replace ‘testOnly_pressed’ with an object of states.
+* Aim to move `Animated` out of core.
+  * Move Animated out of core to separate package in monorepo, allow React Native for Web to import this package. Eventually could drop Animated from ‘react-native’ export.
+* Aim to move `VirtualizedList` and `FlatList` out of core.
+  * Move `VirtualizedList`/`FlatList` out of core to separate package in monorepo, allow React Native for Web to import this package. Eventually could drop these components from `'react-native'` export.
+* Remove Flow types and JSX before publishing to npm (make this the default for the community). React Native and its community packages currently publish uncompiled, flow-typed JavaScript to npm. This causes common tools to crash on these packages.
+* Prevent libraries importing `'react-native'` package internals, by using the Node.js package exports API.
+
+## Drawbacks
+
+* Many of these features can be shimmed in user-space, at the cost of runtime overhead for native or web platforms. The runtime overhead for web is untenable. The runtime overhead of shifting shims into the JS targeting native has yet to be established.
+* It adds redundancy to the React Native API, as the proposal is to make additive changes and avoid requiring removal of existing APIs in the short term.
+
+## Adoption strategy
+
+To encourage library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers will adopt these APIs if they wish to support web.
+
+There are few, if any, breaking changes anticipated for React Native itself.
+
+## How we teach this
+
+Teaching these APIs is simplified by developer familiarity with existing DOM / React DOM APIs.

From 40277dc992ccf6c85168f82b44507eea00dbabfc Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Fri, 2 Dec 2022 13:07:19 -0800
Subject: [PATCH 02/11] Update RFC with complete Strict DOM API

---
 proposals/0000-reduce-fragmentation.md | 870 +++++++++++++++++++------
 1 file changed, 658 insertions(+), 212 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index bf449a51..712b3d33 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -2,53 +2,172 @@
 title: Reduce API fragmentation across platforms
 author:
 - Nicolas Gallagher
-date: 2021-08-03
+date: 2022-08-03
+updated: 2022-11-29
 ---
 
 # RFC: Reduce API fragmentation across platforms
 
 ## Summary
 
-This is a proposal to incrementally reduce the API fragmentation faced by developers using React Native to target multiple platforms, and sharing code between native and web. Each proposed change is additive and can be tackled relatively independently. The aim is to avoid needing to migrate existing React Native code, and to make deprecations an optional and future part of this work.
+This is a proposal to incrementally reduce the API fragmentation faced by developers using React to target multiple platforms with code shared between native and web. The proposed cross-platform user interface APIs are a subset of existing web standards for DOM, CSS, and HTML - "Strict DOM". Each proposed change is additive and does not require migration of existing React Native UI code (deprecations are optional / follow up work). Incremental progress will reduce the fragmentation between React Native and React DOM components.
 
 ## Motivation
 
 React Native currently includes many APIs that are modelled on Web APIs but do not conform to the standards of those Web APIs. React Native also includes many APIs that achieve the same results on Android and iOS but are exposed as 2 different props. And React Native includes several APIs that have known performance (network and runtime) drawbacks on Web.
 
-This proposal aims to allow developers to target more platforms with cross-platform APIs, and deliver better performance when targeting browsers. Features for Android, iOS, and Web are unified by aligning with the Web standard to a) minimize the overhead when running in browsers, and b) reduce developer education required to learn these features.
+This proposal aims to allow developers to target more platforms with cross-platform APIs, and deliver better performance when targeting browsers. Features for Android, iOS, and Web are unified by aligning with the Web standard. Support standards helps to:
+
+* minimize the overhead when running in browsers;
+* reduce developer education required to learn features;
+* set clear and cohesive API end-state expectations for contributors to aim for;
+* support backwards compatibility;
+* develop universal codebases.
+
+React Native for Web uses React DOM and native DOM APIs to shim React Native components and APIs on the web. The tooling for an existing React DOM app simply maps the 'react-native' export to 'react-native-web'. This is the most complete and widely used shim, but comes with considerable DX and UX costs on the web.
+
+![](https://user-images.githubusercontent.com/239676/205388174-6fce19f1-8b3a-4c6e-82f1-89ef9c21ab7d.png)
+
+Implementing a Strict DOM subset in React Native shifts the weight of bridging native and web apps onto React Native Native, where it can be done most efficiently. On the web, we would combine React DOM with stylex.
+
+![](https://user-images.githubusercontent.com/239676/205388313-e58f8793-51cd-4a6e-86e7-89425fd2d0e1.png)
 
 ## Detailed design
 
+The overall work involved is broken down into 5 sections.
+
+* [Props API](#props-api-react-dom-subset). React DOM component props to add to existing React Native components.
+* [Styling API](#styles-api-css-subset). CSS APIs to add to React Native environment.
+* [Environment API](#environment-api). Global APIs to add to the host environment.
+* [Components API](#components-api-dom-subset). React DOM components to add to React Native.
+* [Elements API](#elements-api-dom-subset). DOM APIs to add to host component instances.
+* [Other maintenance](#other-maintenance). Misc tasks to reduce fragmentation.
+
+## Implementation strategy
+
+Where possible we should make these changes to the native code. However, we will prioritize user-space shims in JavaScript where they are faster to ship and allow us to gather feedback/support for this overall direction.
+
+To further reduce risk, the underlying abstractions that we use to implement this proposed "Strict DOM/CSS" API should be flexible enough to support alternative APIs that can co-exist with (or replace) both what is proposed here as well as the existing React Native APIs.
+
+## Adoption strategy
+
 Many of these additions are already in progress and have been proven in a user-space shim at Meta. The features that cannot be shimmed are explicitly called out below. Those features require core changes to React Native. Other features can be shimmed in user-space JavaScript if desired (with any associated performance cost of doing so).
 
-### New common props
-
-Certain props common to all core components have direct equivalents in React DOM. We should support those props where possible. For example, many of the existing `accessibility*` props in React Native are currently mapped to `aria-*` equivalents by React Native for Web. Supporting the ARIA interface would allow more ARIA-targeting React DOM libraries to work on React Native.
-
-* ARIA props
-  * `aria-busy` is the same as `accessibilityState.busy`.
-  * `aria-checked` is the same as `accessibilityState.checked`.
-  * `aria-disabled` is the same as `accessibilityState.disabled`.
-  * `aria-expanded` is the same as `accessibilityState.expanded`.
-  * `aria-hidden` is the same as `accessibilityElementsHidden` (iOS) / `importantforAccessibility` (Android).
-  * `aria-label` is the same as `accessibilityLabel`.
-  * `aria-live` is the same as `accessibilityLiveRegion` (with `'off'` value changed to `'none'`).
-  * `aria-modal` is the same as `accessibilityViewIsModal`.
-  * `aria-selected` is the same as `accessibilityState.selected`.
-  * `aria-valuemax` is the same as `accessibilityValue.max`.
-  * `aria-valuemin` is the same as `accessibilityValue.min`.
-  * `aria-valuenow` is the same as `accessibilityValue.now`.
-  * `aria-valuetext` is the same as `accessibilityValue.text`.
-  * `role` is the same as `accessibilityRole` (with support for web values).
-  * See prior work: [RFC Accessibility APIs](https://github.com/react-native-community/discussions-and-proposals/pull/410/files).
-* Add `dir` prop to configure element's layout / writing direction.
-* Make `id` the same as `nativeID`.
-* Make `onAuxClick` the same as React DOM `onAuxClick` PointerEvent (can't be shimmed).
-* Make `onClick` the same as React DOM `onClick` as PointerEvent (can't be shimmed).
-* Make `onPointer*` props that same as React DOM PointerEvent props (can't be shimmed).
-  * The Android and iOS implementation is currently being developed by Meta.
-* Make `tabIndex` the same as React Native `focusable` prop.
-  * Add support for `0` and `-1` values only.
+To encourage library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers will adopt these APIs if they wish to support web.
+
+## How we teach this
+
+Teaching these APIs is simplified by developer familiarity with existing DOM / React DOM APIs.
+
+## Drawbacks
+
+Many of these features can be shimmed in user-space, at the cost of runtime overhead for native or web platforms. The runtime overhead for web is untenable. The runtime overhead of shifting shims into the React Native JS has yet to be established.
+
+This adds redundancy to the React Native API, as the proposal is to make additive changes and avoid requiring removal of existing APIs in the short term.
+
+We have to be very intentional about how much compatibility with open web standards we can promise. Some cross-platform limitations are rooted in significant differences in the host platforms APIs (e.g., accessibility) and the lack of 99% compat may frustrate users.
+
+This proposal does not include concrete plans for how to support low-level navigation (i.e., `href`) on React Native. This is a crucial aspect of web accessibility and must be incorporated in a future revision.
+
+-----
+
+# Props API (React DOM subset)
+
+One of the fastest and simplest ways to reduce fragmentation between React DOM and React Native is to support more React DOM props on the existing React Native components. This will help to reduce the network and runtime overhead of using React Native for Web, as it will be able to reduce the amount of code responsible for mapping React Native APIs to React DOM APIs. For developers familiar with React DOM, there will be less of a learning curve to applying that knowledge to React Native.
+
+## Core components
+
+The core components `View` and `Text`.
+
+### Primitive props
+
+Certain props common to all core components have direct equivalents in React DOM. We should support those props on native where possible and allow the others in the types definition. Supporting the ARIA 1.2 interface would allow more ARIA-targeting React DOM libraries to work on React Native, and would provide a well defined cross-platform target for equivalent native features (e.g., React Native for Windows needing heading levels, set size, etc.)
+
+- [ ] [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus).
+- [ ] [`aria-activedescendant`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant).
+- [ ] [`aria-atomic`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic).
+- [ ] [`aria-autocomplete`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete).
+- [x] [`aria-busy`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy) is the same as `accessibilityState.busy`.
+- [x] [`aria-checked`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) is the same as `accessibilityState.checked`.
+- [ ] [`aria-colcount`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount).
+- [ ] [`aria-colindex`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex).
+- [ ] [`aria-colindextext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext)
+- [ ] [`aria-colspan`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan).
+- [ ] [`aria-controls`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
+- [ ] [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+- [ ] [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is the same as [`accessibilityDescribedBy`](https://cs.github.com/microsoft/react-native-windows/blob/8ea39fa9737c81516e3cad495ed0e2ae939412ce/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewWin32.Props.ts#L159-L165) (Desktop).
+- [ ] ([`aria-description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description))
+- [ ] [`aria-details`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details).
+- [x] [`aria-disabled`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) is the same as `accessibilityState.disabled`.
+- [ ] [`aria-errormessage`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage) is similar to [`accessibilityErrorMessage`](https://github.com/facebook/react-native/pull/33468).
+- [x] [`aria-expanded`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) is the same as `accessibilityState.expanded`.
+- [ ] [`aria-flowto`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto).
+- [ ] [`aria-haspopup`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup).
+- [x] [`aria-hidden`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) is the same as `accessibilityElementsHidden` (iOS) / `importantforAccessibility` (Android).
+- [ ] [`aria-invalid`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid).
+- [ ] [`aria-keyshortcuts`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts).
+- [x] [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) is the same as `accessibilityLabel`.
+- [x] [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) is the same as `accessibilityLabelledBy` (Android, Desktop).
+- [ ] [`aria-level`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level) is the same as [`accessibilityLevel`](https://github.com/microsoft/react-native-windows/blob/ab330f691477cad43c19b58ab8ce767a1c5baf58/packages/%40office-iss/react-native-win32/src/Libraries/Components/View/ViewWin32.Props.ts#L182-L186) (Desktop).
+- [x] [`aria-live`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) is the same as `accessibilityLiveRegion` with `'off'` value changed to `'none'` (Android).
+- [x] [`aria-modal`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal) is the same as `accessibilityViewIsModal` (iOS).
+- [ ] [`aria-multiline`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline).
+- [ ] [`aria-multiselectable`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable).
+- [ ] [`aria-orientation`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation).
+- [ ] [`aria-owns`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns).
+- [ ] [`aria-placeholder`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder).
+- [ ] [`aria-posinset`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) is the same as [`accessibilityPosInSet`](https://github.com/microsoft/react-native-windows/blob/5dbd74b1852c38f851483478d6da7d81949d0195/vnext/src/Libraries/Components/View/ViewWindowsProps.ts#L42-L47) (Desktop)
+- [ ] [`aria-pressed`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
+- [ ] [`aria-readonly`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly).
+- [ ] [`aria-required`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required).
+- [ ] [`aria-roledescription`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription).
+- [ ] [`aria-rowcount`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount).
+- [ ] [`aria-rowindex`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex).
+- [ ] [`aria-rowindextext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext).
+- [ ] [`aria-rowspan`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan).
+- [x] [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) is the same as `accessibilityState.selected`.
+- [ ] [`aria-setsize`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) is the same as [`accessibilitySetSize`](https://github.com/microsoft/react-native-windows/blob/5dbd74b1852c38f851483478d6da7d81949d0195/vnext/src/Libraries/Components/View/ViewWindowsProps.ts#L49-L54) (Desktop).
+- [ ] [`aria-sort`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort).
+- [x] [`aria-valuemax`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) is the same as `accessibilityValue.max`.
+- [x] [`aria-valuemin`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) is the same as `accessibilityValue.min`.
+- [x] [`aria-valuenow`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) is the same as `accessibilityValue.now`.
+- [x] [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) is the same as `accessibilityValue.text`.
+- [ ] [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) configures element's layout / writing direction.
+- [ ] [`elementTiming`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming).
+- [ ] [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) identifies the language of the text content.
+- [ ] [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden).
+- [x] [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) is the same as `nativeID`.
+- [ ] [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert).
+- [x] [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) is the same as `accessibilityRole` (with support for web values).
+- [x] `style` is unchanged.
+- [x] [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) is the same as `focusable` (Android, Desktop). Add support for `0` and `-1` values only.
+
+### Event props
+
+Props for commonly handled events should also be supported on core components. Each event handler should receive a W3C event object of the corresponding type, not a synthetic event. These props are merely conveniences and otherwise identical to using the `EventTarget` API mentioned later on. Note that no capture phase props are included, as listening to the capture phase (as well as custom events) should be handled with the `EventTarget` API.
+
+To avoid breaking changes in React Native and React DOM, it may be preferrable to create new event prop names that receive events as specified by web standards, e.g., `on-click`, `on-pointerup`.
+
+- [ ] `onAuxClick` is a `PointerEvent` for auxillary clicks.
+- [ ] `onBlur`.
+- [ ] `onClick` is a `PointerEvent` for primary clicks.
+- [ ] `onContextMenu`.
+- [ ] `onCopy`.
+- [ ] `onCut`.
+- [ ] `onFocus`.
+- [ ] `onGotPointerCapture`.
+- [ ] `onLostPointerCapture`.
+- [ ] `onPaste`.
+- [ ] `onPointerCancel`.
+- [ ] `onPointerDown`.
+- [ ] `onPointerEnter`.
+- [ ] `onPointerLeave`.
+- [ ] `onPointerMove`.
+- [ ] `onPointerOut`.
+- [ ] `onPointerOver`.
+- [ ] `onPointerUp`.
+- [ ] `onKeyDown`.
+- [ ] `onKeyUp`.
 
 Example:
 
@@ -57,45 +176,38 @@ Example:
   aria-hidden={false}
   aria-label="Accessibility label"
   id="native-id"
-  onClick={handleDOMClick}
-  onPointerDown={handlePointerDown}
+  on-click={handleDOMClick}
+  on-pointerdown={handlePointerDown}
   role="button"
   tabIndex={0}
 >
 ```
 
-### New props for `<Image>`
+## `Image` component
 
-Various React DOM `img` props also have direct equivalents in React Native. For example, `srcSet` is a subset of the `source` prop. Features like alternative text content are also required to target web.
+Inherits all props and events from "Core Component".
 
-* Add `alt` prop for alternative text support.
-* Add `crossOrigin` prop to declaratively configure cross-origin permissions for loaded images. Equivalent to setting the relevant `Header` in the `source` object.
-* Add `referrerPolicy` to declaratively configure referrer policy. Equivalent to setting the relevant `Header` in the `source` object.
-* Make `src` that same as setting `source.uri`.
-* Make `srcSet` the same as setting a `source` array with `uri` and `scale` properties defined.
-* Add `tintColor` prop.
-  * Image currently sets `tintColor` via the inclusion of a non-standard style property.
-  * Recommend adding `tintColor` prop to replace the React Native style property, to avoid the need to parse out `tintColor` from style for platforms like web.
+### Primitive props
 
-`srcSet` to `source` mapping:
+Various React DOM `img` props have direct equivalents in React Native. For example, `srcSet` is a subset of the `source` prop but without support for specifying headers, etc. Features like alternative text content are also required to target web.
 
-```js
-const { crossOrigin, referrerPolicy, srcSet } = props;
-const source = [];
-const srcList = srcSet.split(', ');
-srcList.forEach((src) => {
-  const [uri, xscale] = src.split(' ');
-  const scale = parseInt(xscale.split('x')[0], 10);
-  const headers = {};
-  if (crossOrigin === 'use-credentials') {
-    headers['Access-Control-Allow-Credentials'] = true;
-  }
-  if (referrerPolicy != null) {
-    headers['Referrer-Policy'] = referrerPolicy;
-  }
-  source.push({ headers, height, scale, uri, width });
-});
-```
+- [x] `alt` prop for alternative text support.
+- [x] `crossOrigin` is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure cross-origin permissions for loaded images.
+- [ ] `decoding`.
+- [ ] `fetchPriority`.
+- [x] `height` is the same as `source.height`.
+- [ ] `loading`.
+- [x] `referrerPolicy` is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure referrer policy.
+- [x] `src` is the same as `source.uri`.
+- [x] `srcSet` is the same as setting a `source` array with `uri` and `scale` properties defined.
+- [x] `width` is the same as `source.width`.
+
+Longer-term we should look to decouple the image component from the image loader. The latter could take the form of a module and/or hook to provide the props needed for a simpler image component as is found in React DOM.
+
+### Event props
+
+- [ ] `onError()`
+- [ ] `onLoad()`
 
 Example:
 
@@ -104,26 +216,63 @@ Example:
   alt="Alternative text"
   crossOrigin="anonymous"
   srcSet="https://image.png 1x, https://image2.png 2x"
-  tintColor="purple"
+  width={320}
 >
 ```
 
-### New props for `<TextInput>`
-
-* Redefine `autoComplete` prop.
-  * Unify values for Android (`autoComplete`) and iOS (`textContentType`) with Web (`autoComplete`).
-  * See below for example mapping
-* Add `enterKeyHint` prop and map to equivalent `returnKeyType` values.
-* Add `inputMode` prop and map to equivalent `keyboardType` values.
-  * `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`
-  * `inputMode === 'email'` is the same as `keyboardType = 'email-address'`
-  * `inputMode === 'numeric'` is the same as `keyboardType = 'numeric'`
-  * `inputMode === 'search'` is the same as `keyboardType = 'search'`
-  * `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`
-  * `inputMode === 'url'` is the same as `keyboardType = 'url'`
-* Make `readOnly` the same as `editable` (inverse).
-* Make `rows` the same as `numberOfLines`.
-  * Support auto-expanding textarea on native platforms.
+## `TextInput` component
+
+Inherits all props and events from "Core Component".
+
+### Primitive props
+
+- [x] `autoComplete` is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
+- [ ] `disabled`.
+- [x] `enterKeyHint` is the same as mapped values for `returnKeyType`.
+- [x] `inputMode`  is the same as mapped values for `keyboardType`.
+  - [x] `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`.
+  - [x] `inputMode === 'email'` is the same as `keyboardType = 'email-address'`.
+  - [x] `inputMode === 'none'` is the same as `showSoftInputOnFocus = false`.
+  - [x] `inputMode === 'numeric'` is the same as `keyboardType = 'numeric'`.
+  - [x] `inputMode === 'search'` is the same as `keyboardType = 'search'`.
+  - [x] `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`.
+  - [x] `inputMode === 'url'` is the same as `keyboardType = 'url'`.
+- [ ] `max`.
+- [x] `maxLength`.
+- [ ] `min`.
+- [ ] `minLength`.
+- [ ] `placeholder`.
+- [x] `readOnly` is the same as inverse `editable`.
+- [ ] `required`.
+- [x] `rows` is the same as `numberOfLines`.
+- [ ] `spellCheck`.
+- [ ] `value`.
+
+### Event props
+
+- [ ] `onBeforeInput()`
+- [ ] `onChange()`
+- [ ] `onInput()`
+- [ ] `onInvalid()`
+- [ ] `onSelect()`
+- [ ] `onSelectionChange()`
+
+Example:
+
+```jsx
+<TextArea
+  autoComplete="email"
+  inputMode="email"
+/>
+
+<TextArea
+  multiline
+  readOnly
+  rows={3}
+/>
+```
+
+## Appendix
 
 `autoComplete` mapping:
 
@@ -190,151 +339,448 @@ const autoCompleteIOS = {
 };
 ```
 
-Example:
-
-```jsx
-<TextArea
-  autoComplete="email"
-  inputMode="email"
-/>
+`srcSet` to `source` mapping:
 
-<TextArea
-  multiline
-  readOnly
-  rows={3}
-/>
+```js
+const { crossOrigin, referrerPolicy, srcSet } = props;
+const source = [];
+const srcList = srcSet.split(', ');
+srcList.forEach((src) => {
+  const [uri, xscale] = src.split(' ');
+  const scale = parseInt(xscale.split('x')[0], 10);
+  const headers = {};
+  if (crossOrigin === 'use-credentials') {
+    headers['Access-Control-Allow-Credentials'] = true;
+  }
+  if (referrerPolicy != null) {
+    headers['Referrer-Policy'] = referrerPolicy;
+  }
+  source.push({ headers, height, scale, uri, width });
+});
 ```
 
-### New styles
-
-* CSS Custom Properties
-  * Support CSS custom property syntax `--variable-name`.
-  * This can be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
-* CSS Lengths
-  * Support `em`, `rem`, `v*`, `px` length units.
-  * This can be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide ancestral font-size information for `rem` values.
-* CSS Colors
-  * Support CSS Colors using [Colorjs.io](https://colorjs.io/).
-  * This can be shimmed in user-space.
-* CSS Media Queries
-  * Support CSS Media Queries. Although Media Queries are not a preferred long-term solution, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers.
-  * This can be shimmed in user-space on top of the existing `StyleSheet` API.
-* CSS Logical Properties
-  * Support CSS logical property names, i.e., `paddingInlineStart` rather than only non-standard `paddingStart`.
-  * Support subtree-level logical properties, where setting the `dir` prop to `ltr` or `rtl` alters the way logical properties are resolved. Currently, React Native only supports global writing direction configuration for Android.
-* CSS Animations
-  * Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`.
-  * See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
-* CSS Transitions
-  * Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`.
-  * Support `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, and `transitionDelay` (see [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)).
-* `aspectRatio`
-  * Support string values, i.e., `'16 / 9'`, to align with CSS.
-* `backgroundImage`
-  * Support setting background images via `url()`.
-  * Optional: support CSS gradients.
-* `boxShadow`
-  * Add native support for CSS box shadows.
-  * This would replace the very buggy iOS-specific `shadow*` styles and Android `elevation` style, allowing developers to unify shadows across native and web platforms.
-* `filter`
- * Support declarative filters per [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
-* `fontVariant`
-  * Support space-separated string values to align with CSS.
-* `fontWeight`
-  * Support number values to align with React DOM / CSS.
-* `lineClamp`
-  * Support CSS clamping text to a set number of lines via style.
-  * This would be equivalent to using the `numberOfLines` prop on `<Text>` components.
-* `objectFit`
-  * Support CSS `objectFit` property for `<Image>`.
-  * This would be a subset (no "repeat" keyword) of functionality currently supported by the `resizeMode` prop and style for `<Image>`.
-  * `objectFit === 'contain'` => `resizeMode = 'contain'`
-  * `objectFit === 'cover'` => `resizeMode = 'cover'`
-  * `objectFit === 'fill'` => `resizeMode = 'stretch'`
-  * `objectFit === 'scale-down'` => `resizeMode = 'contain'`
-* `pointerEvents`
-  * Support setting the `pointerEvents` values via style rather than a prop.
-  * Retain the React Native specific `box-none` and `box-only` values.
-* `textShadow`
-  * Add native support for CSS text shadows.
-* `transform`
-  * Support using string values to set transforms.
-  * This can be shimmed in user-space with a parser.
-* `verticalAlign`
-  * Make `verticalAlign` the same as `textAlignVertical`.
-  * `verticalAlign === 'middle'` is the same as `textAlignVertical = 'center'`;
-* `userSelect`
-  * Support setting ability to select text via style.
-  * Equivalent to using `selectable` prop on `<Text>`.
+-----
+
+# Styles API (CSS subset)
+
+## StyleSheet
+
+* [ ] Deprecate `StyleSheet.absoluteFill`. Use `position:'absolute';inset:0;` instead.
+* [ ] Deprecate `StyleSheet.absoluteFillObject`.
+* [ ] Deprecate `StyleSheet.compose()`. Use existing `[ a, b ]` syntax instead.
+* [ ] Deprecate `StyleSheet.flatten()`. This API encourages runtime introspection of styles in render calls. This pattern is a performance cost (flattening arrays of objects), and prevents us from supporting build-time optimizations for web (e.g., extracting styles to CSS files).
+* [ ] Deprecate or rename `setStyleAttributePreprocessor` (e.g., `unstable_setStyleAttributePreprocessor`).
+* [ ] `StyleSheet.create()` should obfuscate styles to prevent introspection (i.e., revert identify function change). On web, we need to be able to remove the JavaScript style objects from bundles to support build-time optimization like extraction to CSS files.
+
+## CSS compatibility
+
+* [x] `aspectRatio`. Support string values, i.e., `'16 / 9'`, to align with CSS.
+* [ ] `backgroundImage`. Add support for setting background images via `url()`. Stretch: support CSS gradients.
+* [ ] `boxShadow`. Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
+* [x] `fontVariant` support space-separated string values to align with CSS.
+* [x] `fontWeight` support number values to align with React DOM / CSS.
+* [ ] `lineClamp` is equivalent to `numberOfLines` prop on `<Text>` components.
+* [x] `objectFit` is equivalent to `resizeMode` for `<Image>`.
+* [x] `pointerEvents` is equivalent to `pointerEvents` prop.
+* [ ] `position`. Support for `fixed` and `sticky` values.
+* [ ] `textShadow`. Add native support for CSS text shadows.
+* [x] `transform`. Support using string values to set transforms.
+* [x] `verticalAlign` is equivalent to `textAlignVertical`.
+* [ ] `visiblity`. Add support for visually hiding elements.
+* [x] `userSelect`. Equivalent to using `selectable` prop on `<Text>`.
 
-```jsx
-<View
-  style={{
-    boxShadow: '1px 1px 1px 1px #eee',
-    backgroundColor: 'hsla(50,50,50,0.5)',
-    pointerEvents: 'none',
-    transform: 'scale(0.9)',
-    width: '5rem'
-  }}
->
+## CSS Logical Properties
 
-<Text
-  style={{
-    lineClamp: 3,
-    userSelect: 'none',
-    verticalAlign: 'middle'
-  }}
->
+Support CSS logical property names, i.e., `paddingInlineStart` rather than only non-standard `paddingStart`. Support subtree-level logical properties, where setting the `dir` prop to `ltr` or `rtl` alters the way logical properties are resolved. Currently, React Native only supports global writing direction configuration for Android.
 
-<Image
-  style={{
-    objectFit: 'cover'
-  }}
->
-```
+* [ ] `direction` is equivalent to `writingDirection`.
+* [ ] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
+* [ ] `borderEndStartRadius` is equivalent to `borderBottomStartRadius`.
+* [ ] `borderStartEndRadius` is equivalent to `borderTopEndRadius`.
+* [ ] `borderStartStartRadius` is equivalent to `borderTopStartRadius`.
+* [ ] `borderBlockColor` is equivalent to `borderTopColor` & `borderBottomColor`.
+* [ ] `borderBlockEndColor` is equivalent to `borderBottomColor`.
+* [ ] `borderBlockStartColor` is equivalent to `borderTopColor`.
+* [ ] `borderInlineColor` is equivalent to `borderEndColor` & `borderStartColor`.
+* [ ] `borderInlineEndColor` is equivalent to `borderEndColor`.
+* [ ] `borderInlineStartColor` is equivalent to `borderStartColor`.
+* [ ] `borderBlockStyle` is equivalent to `borderTopStyle` & `borderBottomStyle`.
+* [ ] `borderBlockEndStyle` is equivalent to `borderBottomStyle`.
+* [ ] `borderBlockStartStyle` is equivalent to `borderTopStyle`.
+* [ ] `borderInlineStyle` is equivalent to `borderEndStyle` & `borderStartStyle`.
+* [ ] `borderInlineEndStyle` is equivalent to `borderEndStyle`.
+* [ ] `borderInlineStartStyle` is equivalent to `borderStartStyle`.
+* [ ] `borderBlockWidth` is equivalent to `borderTopWidth` & `borderBottomWidth`.
+* [ ] `borderBlockEndWidth` is equivalent to `borderBottomWidth`.
+* [ ] `borderBlockStartWidth` is equivalent to `borderTopWidth`.
+* [ ] `borderInlineWidth` is equivalent to `borderEndWidth` & `borderStartWidth`.
+* [ ] `borderInlineEndWidth` is equivalent to `borderEndWidth`.
+* [ ] `borderInlineStartWidth` is equivalent to `borderStartWidth`.
+* [x] `marginInlineStart` is equivalent to `marginStart`.
+* [x] `marginInlineEnd` is equivalent to `marginEnd`.
+* [x] `marginBlockStart` is equivalent to `marginTop`.
+* [x] `marginBlockEnd` is equivalent to `marginBottom`.
+* [x] `marginBlock` is equivalent to `marginVertical`.
+* [x] `marginInline` is equivalent to `marginHorizontal`.
+* [x] `paddingInlineStart` is equivalent to `paddingStart`.
+* [x] `paddingInlineEnd` is equivalent to `paddingEnd`.
+* [x] `paddingBlockStart` is equivalent to `paddingTop`.
+* [x] `paddingBlockEnd` is equivalent to `paddingBottom`.
+* [x] `paddingBlock` is equivalent to `paddingVertical`.
+* [x] `paddingInline` is equivalent to `paddingHorizontal`.
+* [ ] `inset` is equivalent to `top` & `bottom` & `right` & `left`.
+* [ ] `insetBlock` is equivalent to `top` & `bottom`.
+* [ ] `insetBlockEnd` is equivalent to `bottom`.
+* [ ] `insetBlockStart` is equivalent to `top`.
+* [ ] `insetInline` is equivalent to `right` & `left`.
+* [ ] `insetInlineEnd` is equivalent to `right` or `left`.
+* [ ] `insetInlineStart` is equivalent to `right` or `left`.
 
-### New imperative APIs
-
-* `EventTarget` API
-  * The `EventTarget` API is implemented in JS environments, and should be available on React Native host elements. This feature is commonly used on web, and could be used by React Native developers to support more complex features without first requiring further core API changes to support each use case.
-  * Promote `node.unstable_addEventListener`, `node.unstable_removeEventListener` to stable APIs.
-  * Add `node.dispatchEvent` support.
-  * This cannot be shimmed in user-space.
-* `node.getBoundingClientRect`
-  * Synchronous element measurement API. Current APIs like `node.measure` are async and return slightly different information to what you expect from `getBoundingClientRect` on web.
-  * This cannot be shimmed in user-space.
-
-### Other
-
-* Revisit the type of all events modeled on W3C events. For example, `onTouchStart` should receive an event object that conforms to that received by the same prop in React DOM.
-* Aim to deprecate `StyleSheet.flatten()`.
-  * This API encourages runtime introspection of styles in render calls. This pattern is a performance cost (flattening arrays of objects), and prevents us from supporting build-time optimizations for web (extracting styles to CSS files).
-* Aim to deprecate `StyleSheet.compose()`.
-  * This API has no real value.
-* Aim to restore obfuscation of styles passed to `StyleSheet.create()`.
-  * Returning the styles from create calls encourages introspection of those styles. On web, we need to be able to remove the JavaScript style objects from bundles to support build-time optimization like extraction to CSS files.
-* Aim to deprecate the `Touchable*` components.
-  * The `Pressable` component was shipped as a replacement for `Touchable*`.
-* Aim to support more interaction states with `Pressable`.
-  * Add ‘hovered’ and ‘focused’ to the state object, and replace ‘testOnly_pressed’ with an object of states.
-* Aim to move `Animated` out of core.
-  * Move Animated out of core to separate package in monorepo, allow React Native for Web to import this package. Eventually could drop Animated from ‘react-native’ export.
-* Aim to move `VirtualizedList` and `FlatList` out of core.
-  * Move `VirtualizedList`/`FlatList` out of core to separate package in monorepo, allow React Native for Web to import this package. Eventually could drop these components from `'react-native'` export.
-* Remove Flow types and JSX before publishing to npm (make this the default for the community). React Native and its community packages currently publish uncompiled, flow-typed JavaScript to npm. This causes common tools to crash on these packages.
-* Prevent libraries importing `'react-native'` package internals, by using the Node.js package exports API.
+## CSS Lengths
 
-## Drawbacks
+Support major units where supported by CSS.
 
-* Many of these features can be shimmed in user-space, at the cost of runtime overhead for native or web platforms. The runtime overhead for web is untenable. The runtime overhead of shifting shims into the JS targeting native has yet to be established.
-* It adds redundancy to the React Native API, as the proposal is to make additive changes and avoid requiring removal of existing APIs in the short term.
+* [ ] `em` units.
+* [ ] `rem` units.
+* [ ] `px` units.
+* [ ] `v*` units.
+* [ ] `%` units.
 
-## Adoption strategy
+## CSS Animations
 
-To encourage library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers will adopt these APIs if they wish to support web.
+Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`. See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
 
-There are few, if any, breaking changes anticipated for React Native itself.
+## CSS Colors
 
-## How we teach this
+Support CSS 4 Colors using [Colorjs.io](https://colorjs.io/).
 
-Teaching these APIs is simplified by developer familiarity with existing DOM / React DOM APIs.
+## CSS Custom Properties
+
+Support CSS custom property syntax `--variable-name`. This could be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
+
+## CSS Filters
+
+Support declarative filters as used by the CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) style.
+
+## CSS Media Queries
+
+Support CSS Media Queries. Although Media Queries are not a preferred long-term solution, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers. This could be shimmed in user-space on top of the existing `StyleSheet` API.
+
+## CSS Transitions
+
+Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Support `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, and `transitionDelay` styles (see [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)).
+
+-----
+
+# Environment API
+
+## document
+
+Support the `document` object for common patterns such as listening to document resize, listening to capture or bubble phase events for the entire application (e.g., "outside click" pattern), etc.
+
+### Properties
+
+- [ ] [`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
+- [ ] [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
+
+### Events
+
+* [ ] `scroll`.
+* [ ] `visibilitychange`.
+
+## ResizeObserver
+
+Support the latest [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API for responding the changes in the size of elements. Note that this API no longer includes positional coordinates and is optimized for width/height information.
+
+-----
+
+# Components API (DOM subset)
+
+A logical extension of support more React DOM props is to support a subset of React DOM components directly.
+
+This would provide a built-in declarative API for cross-platform elements in React Native. All unknown tags default to `<span>` layout. All known-but-unimplemented block-level tags default to `<div>` layout. Most tags can be mapped to existing React Native components and props, in the reverse of the [mapping used by React Native for Web](https://github.com/necolas/react-native-web/blob/b2eb3ca03ffc4b8570591b6c2082c6e4edae0e7f/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12-L30).
+
+## Sections
+
+Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
+
+* [ ] `article` is equivalent to `View` with `display:block` layout and `role="article"`.
+* [ ] `aside`
+* [ ] `div` is equivalent to `View` with `display:block` layout.
+* [ ] `footer`.
+* [ ] `h1-6`.
+* [ ] `header`.
+* [ ] `main`.
+* [ ] `nav`.
+* [ ] `section` is equivalent to `View` with `display:block` layout and `role="section"`.
+
+## Text
+
+Text content elements organize blocks or sections of content. Important for accessibility, these elements identify the purpose or structure of that content.
+
+* [ ] `blockquote`.
+* [ ] `li`.
+* [ ] `ol`.
+* [ ] `ul`.
+* [ ] `p`.
+* [ ] `pre`.
+
+## Inline text
+
+Inline text semantics define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
+
+* [ ] `a`.
+* [ ] `b`.
+* [ ] `bdi`.
+* [ ] `bdo`.
+* [ ] `code`.
+* [ ] `em`.
+* [ ] `span` is equivalent to `Text` with `display:inline` layout.
+* [ ] `strong`.
+* [ ] `sub`.
+* [ ] `sup`.
+
+## Media
+
+* [ ] `img` is equivalent to `Image` without advanced loader configuration.
+
+## Forms
+
+Elements which can be used together to create forms which the user can fill out and submit. There's a great deal of further information about this available in the [HTML forms guide](https://developer.mozilla.org/en-US/docs/Learn/Forms).
+
+* [ ] `button`.
+* [ ] `input` is equivalent to `TextInput` with `inputMode` corresponding to `type`.
+* [ ] `label`.
+* [ ] `optgroup`.
+* [ ] `option`.
+* [ ] `progress`.
+* [ ] `select`.
+* [ ] `textarea` is equivalent to `TextInput` with `multiline={true}`.
+
+-----
+
+# Elements API (DOM subset)
+
+Subset of cross-platform DOM APIs exposed on element instances, document, etc. This would be an imperative API for working with the Shadow tree in React Native. Based on data from [MDN Web API](https://developer.mozilla.org/en-US/docs/Web/API), please refer to the MDN links for complete DOM APIs and comment if you believe any should be included in the proposed subset.
+
+In practice, this DOM API subset is generally limited to the “best practice” APIs that can safely be used with React DOM (i.e., read-only operations that don’t modify the DOM tree), and most React components should already be limited to this subset.
+
+## EventTarget
+
+The `EventTarget` API is implemented in JS environments, and should be available on React Native host elements. This feature is commonly used on web, and could be used by React Native developers to support more complex features without first requiring further core API changes to support each use case.
+
+### Methods
+
+- [ ] `EventTarget.addEventListener()`. Registers an event handler to a specific event type on the element.
+- [ ] `EventTarget.dispatchEvent()`. Dispatches an event to this node in the DOM and returns a boolean value that indicates whether no handler canceled the event.
+- [ ] `EventTarget.removeEventListener()`. Removes an event listener from the element.
+
+## Node
+
+The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Every kind of host node is represented by an interface based on Node.
+
+In some cases, a particular feature of the base Node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances.
+
+### Methods
+
+In addition to the properties below, Node inherits methods from its parent, EventTarget.
+
+- [ ] `Node.contains()`. Returns true or false value indicating whether or not a node is a descendant of the calling node.
+- [ ] `Node.getRootNode()`. Returns the context object's root which optionally includes the shadow root if it is available..
+
+## Element
+
+Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
+
+### Properties
+
+Element inherits properties from its parent interface, Node, and by extension that interface's parent, EventTarget.
+
+- [ ] `Element.clientHeight` [Read only]. Returns a number representing the inner height of the element.
+- [ ] `Element.clientLeft` [Read only]. Returns a number representing the width of the left border of the element.
+- [ ] `Element.clientTop` [Read only]. Returns a number representing the width of the top border of the element.
+- [ ] `Element.clientWidth` [Read only]. Returns a number representing the inner width of the element.
+- [ ] `Element.id` [Read only]. Is a DOMString representing the id of the element.
+- [ ] `Element.scrollHeight` [Read only]. Returns a number representing the scroll view height of an element.
+- [ ] `Element.scrollLeft`. Is a number representing the left scroll offset of the element.
+- [ ] `Element.scrollLeftMax` [Read only]. Returns a number representing the maximum left scroll offset possible for the element.
+- [ ] `Element.scrollTop`. A number representing number of pixels the top of the element is scrolled vertically.
+- [ ] `Element.scrollTopMax` [Read only]. Returns a number representing the maximum top scroll offset possible for the element.
+- [ ] `Element.scrollWidth` [Read only]. Returns a number representing the scroll view width of the element.
+
+### Methods
+
+Element inherits methods from its parents Node, and its own parent, EventTarget.
+
+- [ ] `Element.computedStyleMap()`. Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
+- [ ] `Element.getBoundingClientRect()` **P1**. Returns the size of an element and its position relative to the viewport.
+- [ ] `Element.scroll()`. Scrolls to a particular set of coordinates inside a given element.
+- [ ] `Element.scrollBy()`. Scrolls an element by the given amount.
+- [ ] `Element.scrollIntoView()`. Scrolls the page until the element gets into the view.
+- [ ] `Element.scrollTo()`. Scrolls to a particular set of coordinates inside a given element.
+
+### Events
+
+Listen to these events using `addEventListener()` or by assigning an event handler to the equivalent component prop.
+
+- [ ] `error`. Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid. Also available via the `onError` property.
+- [ ] `scroll`. Fired when the document view or an element has been scrolled. Also available via the `onScroll` property.
+- [ ] `select`. Fired when some text has been selected. Also available via the `onSelect` property.
+- [ ] `wheel`. Fired when the user rotates a wheel button on a pointing device (typically a mouse). Also available via the `onWheel` property.
+
+Clipboard events
+
+- [ ] `copy`. Fired when the user initiates a copy action through the browser's user interface. Also available via the `onCopy` property.
+- [ ] `cut`. Fired when the user initiates a cut action through the browser's user interface. Also available via the `onCut` prop.
+- [ ] `paste`. Fired when the user initiates a paste action through the browser's user interface. Also available via the `onPaste` prop.
+
+Focus events
+
+- [ ] `blur`. Fired when an element has lost focus. Also available via the `onBlur` prop.
+- [ ] `focus`. Fired when an element has gained focus. Also available via the `onFocus` prop.
+- [ ] `focusin`. Fired when an element is about to gain focus.
+- [ ] `focusout`. Fired when an element is about to lose focus.
+
+Keyboard events
+
+- [ ] `keydown`. Fired when a key is pressed. Also available via the `onKeyDown` prop.
+- [ ] `keyup`. Fired when a key is released. Also available via the `onKeyUp` prop.
+
+Pointer events
+
+- [ ] `auxclick`. Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element. Also available via the `onAuxClick` prop.
+- [ ] `click`. Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element. Also available via the `onClick` prop.
+- [ ] `contextmenu`. Fired when the user attempts to open a context menu. Also available via the oncontextmenu property.
+
+## HTMLElement
+
+The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
+
+### Properties
+
+Inherits properties from its parent, Element, and implements those from DocumentAndElementEventHandlers, GlobalEventHandlers, and TouchEventHandlers.
+
+- [ ] `HTMLElement.hidden` [Read only]. A boolean value indicating if the element is hidden or not.
+- [ ] `HTMLElement.offsetHeight` [Read only]. Returns a double containing the height of an element, relative to the layout.
+- [ ] `HTMLElement.offsetLeft` [Read only]. Returns a double, the distance from this element's left border to its offsetParent's left border.
+- [ ] `HTMLElement.offsetParent` [Read only]. Returns a Element that is the element from which all offset calculations are currently computed.
+- [ ] `HTMLElement.offsetTop` [Read only]. Returns a double, the distance from this element's top border to its offsetParent's top border.
+- [ ] `HTMLElement.offsetWidth` [Read only]. Returns a double containing the width of an element, relative to the layout.
+
+### Methods
+
+Inherits methods from its parent, Element, and implements those from DocumentAndElementEventHandlers, GlobalEventHandlers, and TouchEventHandlers.
+
+- [x] `HTMLElement.blur()`. Removes keyboard focus from the currently focused element.
+- [ ] `HTMLElement.click()`. Sends a mouse click event to the element.
+- [ ] `HTMLElement.focus(options)`. Makes the element the current keyboard focus.
+
+### Events
+
+Listen to these events using `addEventListener()` or by assigning an event listener to the equivalent component prop.
+
+- [ ] `invalid`. Fired when an element does not satisfy its constraints during constraint validation. Also available via the `onInvalid` prop.
+
+Input events
+
+- [ ] `beforeinput`. Fired when the value of an `<input>`, `<select>`, or `<textarea>` element is about to be modified.
+- [ ] `input`. Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `onInput` property.
+- [ ] `change`. Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `onChange` property.
+
+Pointer events
+
+- [ ] `gotpointercapture`. Fired when an element captures a pointer using `setPointerCapture()`. Also available via the `onGotPointerCapture` prop.
+- [ ] `lostpointercapture`. Fired when a captured pointer is released. Also available via the `onLostPointerCapture` prop.
+- [ ] `pointercancel`. Fired when a pointer event is canceled. Also available via the onpointercancel property.
+- [ ] `pointerdown`. Fired when a pointer becomes active. Also available via the onpointerdown property.
+- [ ] `pointerenter`. Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. Also available via the onpointerenter property.
+- [ ] `pointerleave`. Fired when a pointer is moved out of the hit test boundaries of an element. Also available via the onpointerleave property.
+- [ ] `pointermove`. Fired when a pointer changes coordinates. Also available via the onpointermove property.
+- [ ] `pointerout`. Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). Also available via the `onPointerOut` prop.
+- [ ] `pointerover`. Fired when a pointer is moved into an element's hit test boundaries. Also available via the `onPointerOver` prop.
+- [ ] `pointerup`. Fired when a pointer is no longer active. Also available via the `onPointerUp` prop.
+
+## HTMLImageElement
+
+The HTMLImageElement interface represents an HTML `<img>` element, providing the properties and methods used to manipulate image elements.
+
+### Properties
+
+Inherits properties from its parent, HTMLElement.
+
+- [ ] `HTMLImageElement.complete` [Read only]. Returns a boolean value that is true if the browser has finished fetching the image, whether successful or not. That means this value is also true if the image has no src value indicating an image to load.
+- [ ] `HTMLImageElement.currentSrc` [Read only]. Returns a USVString representing the URL from which the currently displayed image was loaded. This may change as the image is adjusted due to changing conditions, as directed by any media queries which are in place.
+- [ ] `HTMLImageElement.naturalHeight` [Read only]. Returns an integer value representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0. This is the height the image would be if it were rendered at its natural full size.
+- [ ] `HTMLImageElement.naturalWidth` [Read only]. An integer value representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0. This is the width the image would be if it were rendered at its natural full size.
+
+### Events
+
+- [ ] `error`. Also available via the `onError` prop.
+- [ ] `load`. Also available via the `onLoad` prop.
+
+## HTMLInputElement
+
+The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of `<input>` elements.
+
+### Properties
+
+Properties that apply only to visible elements containing text or numbers
+
+- [ ] `selectionEnd`. unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
+- [ ] `selectionStart`. unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element.
+- [ ] `selectionDirection`. string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
+- [ ] `value`. string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
+
+### Methods
+
+- [ ] `select()`. Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
+- [ ] `setSelectionRange()`. Selects a range of text in the input element (but does not focus it).
+- [ ] `showPicker()`. Shows a browser picker for date, time, color, and files.
+
+### Events
+
+Listen to these events using `addEventListener()` or by assigning an event listener to the oneventname property of this interface:
+
+- [ ] `input`. Fires when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Note that this is actually fired on the HTMLElement interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements. Also available via the `onInput` prop.
+- [ ] `invalid`. Fired when an element does not satisfy its constraints during constraint validation. Also available via the `onInvalid` prop.
+- [ ] `selectionchange` event **P1**. Fires when the text selection in a <input> element has been changed. Also available via the `onSelectionChange` prop.
+
+## HTMLTextAreaElement
+
+The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of `<input>` elements.
+
+### Properties
+
+- [ ] `selectionEnd`. unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
+- [ ] `selectionStart`. unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the `<textarea>` element.
+- [ ] `selectionDirection`. string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
+- [ ] `value`. string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
+
+### Methods
+
+- [ ] `select()`. Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
+- [ ] `setSelectionRange()`. Selects a range of text in the input element (but does not focus it).
+
+### Events
+
+Listen to these events using `addEventListener()` or using the equivalent prop name.
+
+- [ ] `input`. Fires when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed.  Also available via the `onInput` prop.
+- [ ] `selectionchange`. Fires when the text selection in a `<textarea>` element has been changed.  Also available via the `onSelectionChange` prop.
+
+-----
+
+# Other maintenance
+
+Other tasks that will help to reduce API fragmentation within React Native, and between React Native and React Native for Web. Large, user-space modules currently exported from the `react-native` package could eventually be moved entirely to separate packages, reducing the size of the core library on native and web, and allowing alternative solutions to compete on a level playing field. JavaScript from the React Native ecosystem should not be published to npm without removal of non-standard syntax.
+
+* [ ] Deprecate the `Touchable*` components. Use `Pressable`.
+* [ ] Add `hovered` state support to `Pressable`.
+* [ ] Add `focused` state support to `Pressable`.
+* [ ] Move `Animated` out of core and into a separate package in the monorepo.
+* [ ] Move `VirtualizedList` out of core and into a separate package in the monorepo.
+* [ ] Move `VirtualizedSectionList` out of core and into a separate package in the monorepo.
+* [ ] Move `FlatList` out of core and into a separate package in the monorepo.
+* [ ] Move `SectionList` out of core and into a separate package in the monorepo.
+* [ ] Strip flow types and JSX from pacakges published to npm (make this the default for the community).
+* [ ] Prevent libraries importing `'react-native'` package internals, by using the Node.js package exports API.

From 0a676dbd0f91051e541c4c80727ba84e9427ae37 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Mon, 5 Dec 2022 10:56:57 -0800
Subject: [PATCH 03/11] Add intent to support IntersectionObserver and
 MutationObserver

---
 proposals/0000-reduce-fragmentation.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index 712b3d33..9965106a 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -488,6 +488,14 @@ Support the `document` object for common patterns such as listening to document
 * [ ] `scroll`.
 * [ ] `visibilitychange`.
 
+## IntersectionObserver
+
+Support the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API for observing the intersection of target elements. This can also be used as a building block for performance tooling.
+
+## MutationObserver
+
+Support the latest [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API for watching changes to the host node tree. This can also be used as a building block for performance tooling.
+
 ## ResizeObserver
 
 Support the latest [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API for responding the changes in the size of elements. Note that this API no longer includes positional coordinates and is optimized for width/height information.

From 6cf50f5bebc51e0d36785f43f90d75b4623f9ba4 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Tue, 6 Dec 2022 13:24:04 -0800
Subject: [PATCH 04/11] Add style notes and StyleSheet(...styles) API

---
 proposals/0000-reduce-fragmentation.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index 9965106a..2e16be6e 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -363,6 +363,8 @@ srcList.forEach((src) => {
 
 # Styles API (CSS subset)
 
+The styling capabilities of React Native should be significantly expanded to cover more of the features that are heavily relied upon by web engineers. Furthermore, React Native needs to gracefully handle unknown style properties or values as is expected on the web. Rather than hard crashing it could print warnings to bring attention to any styles that are not currently supported on native.
+
 ## StyleSheet
 
 * [ ] Deprecate `StyleSheet.absoluteFill`. Use `position:'absolute';inset:0;` instead.
@@ -371,6 +373,7 @@ srcList.forEach((src) => {
 * [ ] Deprecate `StyleSheet.flatten()`. This API encourages runtime introspection of styles in render calls. This pattern is a performance cost (flattening arrays of objects), and prevents us from supporting build-time optimizations for web (e.g., extracting styles to CSS files).
 * [ ] Deprecate or rename `setStyleAttributePreprocessor` (e.g., `unstable_setStyleAttributePreprocessor`).
 * [ ] `StyleSheet.create()` should obfuscate styles to prevent introspection (i.e., revert identify function change). On web, we need to be able to remove the JavaScript style objects from bundles to support build-time optimization like extraction to CSS files.
+* [ ] `StyleSheet` should be a function that returns native props, e.g., `const nativeProps = StyleSheet(...styles)`. On web, this is used to pass DOM `className` and `style` props, whereas on native it can be used to pass flattened/transformed styles and any other other native props to native components.
 
 ## CSS compatibility
 
@@ -386,7 +389,7 @@ srcList.forEach((src) => {
 * [ ] `textShadow`. Add native support for CSS text shadows.
 * [x] `transform`. Support using string values to set transforms.
 * [x] `verticalAlign` is equivalent to `textAlignVertical`.
-* [ ] `visiblity`. Add support for visually hiding elements.
+* [ ] `visibility`. Add support for visually hiding elements.
 * [x] `userSelect`. Equivalent to using `selectable` prop on `<Text>`.
 
 ## CSS Logical Properties

From afcf734cd939f14cb67bc38baf926058c14fe0b3 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Wed, 7 Dec 2022 12:04:47 -0800
Subject: [PATCH 05/11] Reorganize and expand on CSS subset

---
 proposals/0000-reduce-fragmentation.md | 80 +++++++++++++++++++-------
 1 file changed, 59 insertions(+), 21 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index 2e16be6e..0aad9491 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -375,26 +375,21 @@ The styling capabilities of React Native should be significantly expanded to cov
 * [ ] `StyleSheet.create()` should obfuscate styles to prevent introspection (i.e., revert identify function change). On web, we need to be able to remove the JavaScript style objects from bundles to support build-time optimization like extraction to CSS files.
 * [ ] `StyleSheet` should be a function that returns native props, e.g., `const nativeProps = StyleSheet(...styles)`. On web, this is used to pass DOM `className` and `style` props, whereas on native it can be used to pass flattened/transformed styles and any other other native props to native components.
 
-## CSS compatibility
+## CSS Compatibility
+
+Existing properties that can be adjusted to align with the CSS spec.
 
 * [x] `aspectRatio`. Support string values, i.e., `'16 / 9'`, to align with CSS.
-* [ ] `backgroundImage`. Add support for setting background images via `url()`. Stretch: support CSS gradients.
-* [ ] `boxShadow`. Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
 * [x] `fontVariant` support space-separated string values to align with CSS.
 * [x] `fontWeight` support number values to align with React DOM / CSS.
-* [ ] `lineClamp` is equivalent to `numberOfLines` prop on `<Text>` components.
 * [x] `objectFit` is equivalent to `resizeMode` for `<Image>`.
 * [x] `pointerEvents` is equivalent to `pointerEvents` prop.
 * [ ] `position`. Support for `fixed` and `sticky` values.
-* [ ] `textShadow`. Add native support for CSS text shadows.
 * [x] `transform`. Support using string values to set transforms.
 * [x] `verticalAlign` is equivalent to `textAlignVertical`.
-* [ ] `visibility`. Add support for visually hiding elements.
 * [x] `userSelect`. Equivalent to using `selectable` prop on `<Text>`.
 
-## CSS Logical Properties
-
-Support CSS logical property names, i.e., `paddingInlineStart` rather than only non-standard `paddingStart`. Support subtree-level logical properties, where setting the `dir` prop to `ltr` or `rtl` alters the way logical properties are resolved. Currently, React Native only supports global writing direction configuration for Android.
+Existing logical properties that can be adjusted to adopt the CSS standard names. In addition, React Native will need to add native support for subtree-level writing direction controls. Setting the `dir` prop (or `direction` style) to `ltr` or `rtl` on an element should alter the way logical properties are resolved in the subtree.
 
 * [ ] `direction` is equivalent to `writingDirection`.
 * [ ] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
@@ -439,24 +434,18 @@ Support CSS logical property names, i.e., `paddingInlineStart` rather than only
 * [ ] `insetInlineEnd` is equivalent to `right` or `left`.
 * [ ] `insetInlineStart` is equivalent to `right` or `left`.
 
-## CSS Lengths
-
-Support major units where supported by CSS.
-
-* [ ] `em` units.
-* [ ] `rem` units.
-* [ ] `px` units.
-* [ ] `v*` units.
-* [ ] `%` units.
-
 ## CSS Animations
 
-Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`. See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
+Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C animation events too. See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
 
 ## CSS Colors
 
 Support CSS 4 Colors using [Colorjs.io](https://colorjs.io/).
 
+## CSS Container Queries
+
+Prepare for [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries).
+
 ## CSS Custom Properties
 
 Support CSS custom property syntax `--variable-name`. This could be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
@@ -465,13 +454,62 @@ Support CSS custom property syntax `--variable-name`. This could be shimmed in u
 
 Support declarative filters as used by the CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) style.
 
+## CSS Functions
+
+* [ ] `calc()`(https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
+* [ ] `clamp()`(https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)
+* [ ] `max()`(https://developer.mozilla.org/en-US/docs/Web/CSS/max)
+* [ ] `min()`(https://developer.mozilla.org/en-US/docs/Web/CSS/min)
+* [ ] `minmax()`(https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)
+* [ ] `url()`(https://developer.mozilla.org/en-US/docs/Web/CSS/url)
+* [ ] `var()`(https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+
+## CSS Lengths
+
+Support major units where supported by CSS.
+
+* [ ] `em` units.
+* [ ] `rem` units.
+* [ ] `px` units.
+* [ ] `v*` units.
+* [ ] `%` units.
+
 ## CSS Media Queries
 
 Support CSS Media Queries. Although Media Queries are not a preferred long-term solution, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers. This could be shimmed in user-space on top of the existing `StyleSheet` API.
 
+## CSS Properties and Values
+
+Miscellaneous CSS properties and values that should be supported on native.
+
+* [ ] `backgroundImage`. Add support for setting background images via `url()`. Stretch: support CSS gradients.
+* [ ] `boxSizing`.
+* [ ] `boxShadow`. Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
+* [ ] `caretColor`.
+* [ ] `clipPath`.
+* [ ] `display` values of `block`, `inline`, `inline-block`, `inline-flex`.
+* [ ] `float`.
+* [ ] [`justifySelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). Sets the way a box is justified inside its alignment container along the appropriate axis.
+* [ ] (`lineClamp` is equivalent to `numberOfLines` prop on `<Text>` components).
+* [ ] [`objectPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position).
+* [ ] `overflowBlock`.
+* [ ] `overflowInline`.
+* [ ] `overflowX`.
+* [ ] `overflowY`.
+* [ ] [`placeContent`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content). Shorthand for setting `alignContent` and `justifyContent`. Value is an enum of `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `safe`, `space-around`, `space-between`, `space-evenly`, `start`, `stretch`, `unsafe`. Note that `space-evenly` should also be supported for `alignContent` and `justifyContent`.
+* [ ] [`placeItems`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items). Shorthand for setting `alignItems` and `justifyItems`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `start`, `stretch`.
+* [ ] [`placeSelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self). Shorthand for setting `alignSelf` and `justifySelf`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `normal`, `right`, `start`, `stretch`.
+* [ ] [`rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate).
+* [ ] [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale).
+* [ ] `textShadow`. Add native support for CSS text shadows.
+* [ ] [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).
+* [ ] [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate).
+* [ ] `visibility`. Add support for visually hiding elements.
+* [ ] [`whiteSpace`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space).
+
 ## CSS Transitions
 
-Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Support `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, and `transitionDelay` styles (see [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)).
+Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Support `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, and `transitionDelay` styles (see [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)). Consider dispatching the corresponding W3C transition events too.
 
 -----
 

From 7edf690d5ac182368ad86852e420d220ddef08a7 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Thu, 8 Dec 2022 12:03:24 -0800
Subject: [PATCH 06/11] Add 'borderRadius' compat and 'direction' issue

---
 proposals/0000-reduce-fragmentation.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index 0aad9491..0c631d41 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -380,6 +380,7 @@ The styling capabilities of React Native should be significantly expanded to cov
 Existing properties that can be adjusted to align with the CSS spec.
 
 * [x] `aspectRatio`. Support string values, i.e., `'16 / 9'`, to align with CSS.
+* [x] `borderRadius`. Support percentage values to align with CSS.
 * [x] `fontVariant` support space-separated string values to align with CSS.
 * [x] `fontWeight` support number values to align with React DOM / CSS.
 * [x] `objectFit` is equivalent to `resizeMode` for `<Image>`.
@@ -391,7 +392,7 @@ Existing properties that can be adjusted to align with the CSS spec.
 
 Existing logical properties that can be adjusted to adopt the CSS standard names. In addition, React Native will need to add native support for subtree-level writing direction controls. Setting the `dir` prop (or `direction` style) to `ltr` or `rtl` on an element should alter the way logical properties are resolved in the subtree.
 
-* [ ] `direction` is equivalent to `writingDirection`.
+* [ ] (`direction` is equivalent to `writingDirection`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) on web, and we should consider removing it in favor of the `dir` prop.)
 * [ ] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
 * [ ] `borderEndStartRadius` is equivalent to `borderBottomStartRadius`.
 * [ ] `borderStartEndRadius` is equivalent to `borderTopEndRadius`.
@@ -483,6 +484,7 @@ Support CSS Media Queries. Although Media Queries are not a preferred long-term
 Miscellaneous CSS properties and values that should be supported on native.
 
 * [ ] `backgroundImage`. Add support for setting background images via `url()`. Stretch: support CSS gradients.
+* [ ] `backgroundPosition`.
 * [ ] `boxSizing`.
 * [ ] `boxShadow`. Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
 * [ ] `caretColor`.

From 1d744d75fc188fb9434d02ba5639562900dd5c90 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Fri, 23 Dec 2022 17:45:22 +0000
Subject: [PATCH 07/11] Add more links and a few more APIs

---
 proposals/0000-reduce-fragmentation.md | 601 ++++++++++++++++---------
 1 file changed, 376 insertions(+), 225 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index 0c631d41..60b187df 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -16,7 +16,7 @@ This is a proposal to incrementally reduce the API fragmentation faced by develo
 
 React Native currently includes many APIs that are modelled on Web APIs but do not conform to the standards of those Web APIs. React Native also includes many APIs that achieve the same results on Android and iOS but are exposed as 2 different props. And React Native includes several APIs that have known performance (network and runtime) drawbacks on Web.
 
-This proposal aims to allow developers to target more platforms with cross-platform APIs, and deliver better performance when targeting browsers. Features for Android, iOS, and Web are unified by aligning with the Web standard. Support standards helps to:
+This proposal aims to allow developers to target more platforms with cross-platform APIs, and deliver better performance when targeting browsers. Features for Android, iOS, and Web are unified by aligning with the Web standard. Supporting standards helps to:
 
 * minimize the overhead when running in browsers;
 * reduce developer education required to learn features;
@@ -51,9 +51,9 @@ To further reduce risk, the underlying abstractions that we use to implement thi
 
 ## Adoption strategy
 
-Many of these additions are already in progress and have been proven in a user-space shim at Meta. The features that cannot be shimmed are explicitly called out below. Those features require core changes to React Native. Other features can be shimmed in user-space JavaScript if desired (with any associated performance cost of doing so).
+Many of these additions are already in progress and have been proven in a user-space shim at Meta. But a lot of the proposed features require core changes to React Native.
 
-To encourage library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers will adopt these APIs if they wish to support web.
+To encourage React Native library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers will adopt these APIs if they wish to support web.
 
 ## How we teach this
 
@@ -132,10 +132,11 @@ Certain props common to all core components have direct equivalents in React DOM
 - [x] [`aria-valuemin`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) is the same as `accessibilityValue.min`.
 - [x] [`aria-valuenow`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) is the same as `accessibilityValue.now`.
 - [x] [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) is the same as `accessibilityValue.text`.
+- [ ] ([`data-*`]() props. Resolves proposal [#323](https://github.com/react-native-community/discussions-and-proposals/issues/323))
 - [ ] [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) configures element's layout / writing direction.
 - [ ] [`elementTiming`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming).
 - [ ] [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) identifies the language of the text content.
-- [ ] [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden).
+- [ ] [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) is the same as `display:'none'`.
 - [x] [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) is the same as `nativeID`.
 - [ ] [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert).
 - [x] [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) is the same as `accessibilityRole` (with support for web values).
@@ -148,26 +149,28 @@ Props for commonly handled events should also be supported on core components. E
 
 To avoid breaking changes in React Native and React DOM, it may be preferrable to create new event prop names that receive events as specified by web standards, e.g., `on-click`, `on-pointerup`.
 
-- [ ] `onAuxClick` is a `PointerEvent` for auxillary clicks.
-- [ ] `onBlur`.
-- [ ] `onClick` is a `PointerEvent` for primary clicks.
-- [ ] `onContextMenu`.
-- [ ] `onCopy`.
-- [ ] `onCut`.
-- [ ] `onFocus`.
-- [ ] `onGotPointerCapture`.
-- [ ] `onLostPointerCapture`.
-- [ ] `onPaste`.
-- [ ] `onPointerCancel`.
-- [ ] `onPointerDown`.
-- [ ] `onPointerEnter`.
-- [ ] `onPointerLeave`.
-- [ ] `onPointerMove`.
-- [ ] `onPointerOut`.
-- [ ] `onPointerOver`.
-- [ ] `onPointerUp`.
-- [ ] `onKeyDown`.
-- [ ] `onKeyUp`.
+Resolves proposal [#492](https://github.com/react-native-community/discussions-and-proposals/issues/492).
+
+- [ ] `on-auxclick` is a `PointerEvent` for auxillary clicks.
+- [ ] `on-blur`.
+- [ ] `on-click` is a `PointerEvent` for primary clicks.
+- [ ] `on-contextmenu` is a `PointerEvent` for context clicks / long press.
+- [ ] `on-copy`.
+- [ ] `on-cut`.
+- [ ] `on-focus`.
+- [ ] `on-gotpointercapture`.
+- [ ] `on-lostpointercapture`.
+- [ ] `on-paste`.
+- [ ] `on-pointercancel`.
+- [ ] `on-pointerdown`.
+- [ ] `on-pointerenter`.
+- [ ] `on-pointerleave`.
+- [ ] `on-pointermove`.
+- [ ] `on-pointerout`.
+- [ ] `on-pointerover`.
+- [ ] `on-pointerup`.
+- [ ] `on-keydown`.
+- [ ] `on-keyup`.
 
 Example:
 
@@ -191,23 +194,24 @@ Inherits all props and events from "Core Component".
 
 Various React DOM `img` props have direct equivalents in React Native. For example, `srcSet` is a subset of the `source` prop but without support for specifying headers, etc. Features like alternative text content are also required to target web.
 
-- [x] `alt` prop for alternative text support.
-- [x] `crossOrigin` is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure cross-origin permissions for loaded images.
-- [ ] `decoding`.
-- [ ] `fetchPriority`.
-- [x] `height` is the same as `source.height`.
-- [ ] `loading`.
-- [x] `referrerPolicy` is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure referrer policy.
-- [x] `src` is the same as `source.uri`.
-- [x] `srcSet` is the same as setting a `source` array with `uri` and `scale` properties defined.
-- [x] `width` is the same as `source.width`.
+- [x] [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt) prop for alternative text support.
+- [x] [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin) is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure cross-origin permissions for loaded images.
+- [ ] [`decoding`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-decoding).
+- [ ] `draggable`.
+- [ ] [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority).
+- [x] [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height) is the same as `source.height`.
+- [ ] [`loading`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading).
+- [x] [`referrerPolicy`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy) is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure referrer policy.
+- [x] [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src) is the same as `source.uri`.
+- [x] [`srcSet`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) is the same as setting a `source` array with `uri` and `scale` properties defined.
+- [x] [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width) is the same as `source.width`.
 
 Longer-term we should look to decouple the image component from the image loader. The latter could take the form of a module and/or hook to provide the props needed for a simpler image component as is found in React DOM.
 
 ### Event props
 
-- [ ] `onError()`
-- [ ] `onLoad()`
+- [ ] [`on-error`](https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event)
+- [ ] `on-load`
 
 Example:
 
@@ -226,10 +230,10 @@ Inherits all props and events from "Core Component".
 
 ### Primitive props
 
-- [x] `autoComplete` is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
-- [ ] `disabled`.
-- [x] `enterKeyHint` is the same as mapped values for `returnKeyType`.
-- [x] `inputMode`  is the same as mapped values for `keyboardType`.
+- [x] [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
+- [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+- [x] [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) is the same as mapped values for `returnKeyType`.
+- [x] [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)  is the same as mapped values for `keyboardType`.
   - [x] `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`.
   - [x] `inputMode === 'email'` is the same as `keyboardType = 'email-address'`.
   - [x] `inputMode === 'none'` is the same as `showSoftInputOnFocus = false`.
@@ -237,25 +241,25 @@ Inherits all props and events from "Core Component".
   - [x] `inputMode === 'search'` is the same as `keyboardType = 'search'`.
   - [x] `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`.
   - [x] `inputMode === 'url'` is the same as `keyboardType = 'url'`.
-- [ ] `max`.
-- [x] `maxLength`.
-- [ ] `min`.
-- [ ] `minLength`.
-- [ ] `placeholder`.
-- [x] `readOnly` is the same as inverse `editable`.
-- [ ] `required`.
-- [x] `rows` is the same as `numberOfLines`.
-- [ ] `spellCheck`.
-- [ ] `value`.
+- [ ] [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max).
+- [x] [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength).
+- [ ] [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min).
+- [ ] [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength).
+- [ ] [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder).
+- [x] [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly) is the same as inverse `editable`.
+- [ ] [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required).
+- [x] [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) is the same as `numberOfLines`.
+- [ ] [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck).
+- [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value).
 
 ### Event props
 
-- [ ] `onBeforeInput()`
-- [ ] `onChange()`
-- [ ] `onInput()`
-- [ ] `onInvalid()`
-- [ ] `onSelect()`
-- [ ] `onSelectionChange()`
+- [ ] `on-beforeinput`
+- [ ] `on-change`
+- [ ] `on-input`
+- [ ] `on-invalid`
+- [ ] `on-select`
+- [ ] `on-selectionchange`
 
 Example:
 
@@ -379,20 +383,20 @@ The styling capabilities of React Native should be significantly expanded to cov
 
 Existing properties that can be adjusted to align with the CSS spec.
 
-* [x] `aspectRatio`. Support string values, i.e., `'16 / 9'`, to align with CSS.
-* [x] `borderRadius`. Support percentage values to align with CSS.
-* [x] `fontVariant` support space-separated string values to align with CSS.
-* [x] `fontWeight` support number values to align with React DOM / CSS.
-* [x] `objectFit` is equivalent to `resizeMode` for `<Image>`.
-* [x] `pointerEvents` is equivalent to `pointerEvents` prop.
-* [ ] `position`. Support for `fixed` and `sticky` values.
-* [x] `transform`. Support using string values to set transforms.
-* [x] `verticalAlign` is equivalent to `textAlignVertical`.
-* [x] `userSelect`. Equivalent to using `selectable` prop on `<Text>`.
+* [x] [`aspectRatio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio). Support string values, i.e., `'16 / 9'`, to align with CSS.
+* [x] [`borderRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). Support percentage values to align with CSS.
+* [x] [`fontVariant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) support space-separated string values to align with CSS.
+* [x] [`fontWeight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) support number values to align with React DOM / CSS.
+* [x] [`objectFit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) is equivalent to `resizeMode` for `<Image>`.
+* [x] [`pointerEvents`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) is equivalent to `pointerEvents` prop.
+* [ ] [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position). Support for `fixed` and `sticky` values.
+* [x] [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform). Support using string values to set transforms.
+* [x] [`verticalAlign`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) is equivalent to `textAlignVertical`.
+* [x] [`userSelect`](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select). Equivalent to using `selectable` prop on `<Text>`.
 
 Existing logical properties that can be adjusted to adopt the CSS standard names. In addition, React Native will need to add native support for subtree-level writing direction controls. Setting the `dir` prop (or `direction` style) to `ltr` or `rtl` on an element should alter the way logical properties are resolved in the subtree.
 
-* [ ] (`direction` is equivalent to `writingDirection`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) on web, and we should consider removing it in favor of the `dir` prop.)
+* [ ] (`direction`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) on web, and we should consider removing it in favor of the `dir` prop.)
 * [ ] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
 * [ ] `borderEndStartRadius` is equivalent to `borderBottomStartRadius`.
 * [ ] `borderStartEndRadius` is equivalent to `borderTopEndRadius`.
@@ -427,21 +431,32 @@ Existing logical properties that can be adjusted to adopt the CSS standard names
 * [x] `paddingBlockEnd` is equivalent to `paddingBottom`.
 * [x] `paddingBlock` is equivalent to `paddingVertical`.
 * [x] `paddingInline` is equivalent to `paddingHorizontal`.
-* [ ] `inset` is equivalent to `top` & `bottom` & `right` & `left`.
-* [ ] `insetBlock` is equivalent to `top` & `bottom`.
-* [ ] `insetBlockEnd` is equivalent to `bottom`.
-* [ ] `insetBlockStart` is equivalent to `top`.
-* [ ] `insetInline` is equivalent to `right` & `left`.
-* [ ] `insetInlineEnd` is equivalent to `right` or `left`.
-* [ ] `insetInlineStart` is equivalent to `right` or `left`.
+* [x] `inset` is equivalent to `top` & `bottom` & `right` & `left`.
+* [x] `insetBlock` is equivalent to `top` & `bottom`.
+* [x] `insetBlockEnd` is equivalent to `bottom`.
+* [x] `insetBlockStart` is equivalent to `top`.
+* [x] `insetInline` is equivalent to `right` & `left`.
+* [x] `insetInlineEnd` is equivalent to `right` or `left`.
+* [x] `insetInlineStart` is equivalent to `right` or `left`.
 
 ## CSS Animations
 
 Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C animation events too. See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
 
+- [ ] [`animationDelay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)
+- [ ] [`animationDirection`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
+- [ ] [`animationDuration`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)
+- [ ] [`animationFillMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)
+- [ ] [`animationIterationCount`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)
+- [ ] [`animationName`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name)
+- [ ] [`animationPlayState`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)
+- [ ] [`animationTimingFunction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
+
+TBD: the relationship between `animationName` (or equivalent) and the API used to define Animation keyframes.
+
 ## CSS Colors
 
-Support CSS 4 Colors using [Colorjs.io](https://colorjs.io/).
+Support CSS 4 Colors, possibly by using [Colorjs.io](https://colorjs.io/) or implementing a native equivalent.
 
 ## CSS Container Queries
 
@@ -451,98 +466,227 @@ Prepare for [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web
 
 Support CSS custom property syntax `--variable-name`. This could be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
 
+* [`CSS Variables`](https://w3c.github.io/csswg-drafts/css-variables/)
+* [Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+* [`var()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+
 ## CSS Filters
 
 Support declarative filters as used by the CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) style.
 
+* [ ] [`blur()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur)
+* [ ] [`brightness()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness)
+* [ ] [`contrast()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast)
+* [ ] [`drop-shadow()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow)
+* [ ] [`grayscale()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale)
+* [ ] [`hue-rotate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate)
+* [ ] [`invert()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert)
+* [ ] [`opacity()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity)
+* [ ] [`saturate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate)
+* [ ] [`sepia()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia)
+
 ## CSS Functions
 
-* [ ] `calc()`(https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
-* [ ] `clamp()`(https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)
-* [ ] `max()`(https://developer.mozilla.org/en-US/docs/Web/CSS/max)
-* [ ] `min()`(https://developer.mozilla.org/en-US/docs/Web/CSS/min)
-* [ ] `minmax()`(https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)
-* [ ] `url()`(https://developer.mozilla.org/en-US/docs/Web/CSS/url)
-* [ ] `var()`(https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+* [ ] [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
+* [ ] [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)
+* [ ] [`max()`](https://developer.mozilla.org/en-US/docs/Web/CSS/max)
+* [ ] [`min()`](https://developer.mozilla.org/en-US/docs/Web/CSS/min)
+* [ ] [`minmax()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)
+* [ ] [`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/url)
+* [ ] [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
 
 ## CSS Lengths
 
 Support major units where supported by CSS.
 
-* [ ] `em` units.
-* [ ] `rem` units.
+* [ ] [`em`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
+* [ ] [`rem`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
 * [ ] `px` units.
-* [ ] `v*` units.
-* [ ] `%` units.
+* [ ] [`v*`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
+* [ ] [`%`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages) units.
 
 ## CSS Media Queries
 
-Support CSS Media Queries. Although Media Queries are not a preferred long-term solution, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers. This could be shimmed in user-space on top of the existing `StyleSheet` API.
+Support CSS Media Queries.
+
+Although Media Queries are not a preferred long-term solution for responsive design, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers. The dimensional Media Queries could be shimmed in user-space on top of the existing `StyleSheet` API.
+
+Logical operators `not`, `and`, `or`, `only`.
+
+[Media features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features):
+
+- [ ] [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio)
+- [ ] [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)
+- [ ] [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height)
+- [ ] [`inverted-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)
+- [ ] [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation)
+- [ ] [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+- [ ] [`prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)
+- [ ] [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
+- [ ] [`resolution`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution)
+- [ ] [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
+
+Proposed syntax:
+
+```js
+// Either
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    '@media (max-width: 600px)': {
+      position: 'sticky',
+    }
+  }
+});
+
+// Or
+const styles = StyleSheet.create({
+  root: {
+    position: {
+      default: 'absolute',
+      '@media (max-width: 600px)': 'sticky',
+    }
+  }
+});
+```
+
+The benefit of the latter is clearer expectations (and greater constraints) about when properties are overridden. For example, it's not as clear what the value for `position` would be in the following:
+
+```js
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    '@media (max-width: 600px)': {
+      position: 'sticky',
+    }
+  },
+  override: {
+    position: 'relative',
+  }
+});
+
+const style = [ styles.root, styles.override ];
+// {
+//   position: relative,
+//   '@media (max-width: 600px)': {
+//     position: 'sticky',
+//   }
+// }
+```
+
+Whereas in the next example we can set expectations that a property *and any previous conditions* are completed overridden by any declaration that later modifies the property in any way.
+
+```js
+const styles = StyleSheet.create({
+  root: {
+    position: {
+      default: 'absolute',
+      '@media (max-width: 600px)': 'sticky'
+    }
+  },
+  override: {
+    position: {
+      default: 'relative',
+    }
+  }
+});
+
+const style = [ styles.root, styles.override ];
+// {
+//   position: relative
+// }
+```
+
+Consideration is also required to determine what the final value of a property is when Media Query conditions overlap, i.e., which media features and which conditions (e.g., multiple `width` conditions) take priority over others.
 
 ## CSS Properties and Values
 
 Miscellaneous CSS properties and values that should be supported on native.
 
-* [ ] `backgroundImage`. Add support for setting background images via `url()`. Stretch: support CSS gradients.
-* [ ] `backgroundPosition`.
-* [ ] `boxSizing`.
-* [ ] `boxShadow`. Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
-* [ ] `caretColor`.
-* [ ] `clipPath`.
-* [ ] `display` values of `block`, `inline`, `inline-block`, `inline-flex`.
-* [ ] `float`.
+* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients.
+* [ ] [`backgroundOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).
+* [ ] [`backgroundPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
+* [ ] [`backgroundRepeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
+* [ ] [`backgroundSize`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
+* [ ] [`boxSizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
+* [ ] [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
+* [ ] [`caretColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color).
+* [ ] [`clipPath`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
+* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`.
+* [ ] [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float).
 * [ ] [`justifySelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). Sets the way a box is justified inside its alignment container along the appropriate axis.
-* [ ] (`lineClamp` is equivalent to `numberOfLines` prop on `<Text>` components).
+* [ ] ([`lineClamp`](https://www.w3.org/TR/css-overflow-3/#propdef-line-clamp) is equivalent to `numberOfLines` prop on `<Text>` components).
 * [ ] [`objectPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position).
-* [ ] `overflowBlock`.
-* [ ] `overflowInline`.
-* [ ] `overflowX`.
-* [ ] `overflowY`.
+* [ ] [`overflowBlock`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block).
+* [ ] [`overflowInline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline).
+* [ ] [`overflowX`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x).
+* [ ] [`overflowY`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y).
 * [ ] [`placeContent`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content). Shorthand for setting `alignContent` and `justifyContent`. Value is an enum of `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `safe`, `space-around`, `space-between`, `space-evenly`, `start`, `stretch`, `unsafe`. Note that `space-evenly` should also be supported for `alignContent` and `justifyContent`.
 * [ ] [`placeItems`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items). Shorthand for setting `alignItems` and `justifyItems`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `start`, `stretch`.
 * [ ] [`placeSelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self). Shorthand for setting `alignSelf` and `justifySelf`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `normal`, `right`, `start`, `stretch`.
 * [ ] [`rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate).
 * [ ] [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale).
+* [ ] [`scrollSnap*`](https://drafts.csswg.org/css-scroll-snap-1/#overview)
 * [ ] `textShadow`. Add native support for CSS text shadows.
 * [ ] [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).
+* [ ] [`transformStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style). Resolves proposal [#425](https://github.com/react-native-community/discussions-and-proposals/issues/425).
 * [ ] [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate).
-* [ ] `visibility`. Add support for visually hiding elements.
+* [ ] [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility). Add support for visually hiding elements.
 * [ ] [`whiteSpace`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space).
 
 ## CSS Transitions
 
-Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Support `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, and `transitionDelay` styles (see [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)). Consider dispatching the corresponding W3C transition events too.
+Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C transition events too.
+
+- [ ] [`transitionDelay`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
+- [ ] [`transitionDuration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)
+- [ ] [`transitionProperty`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
+- [ ] [`transitionTimingFunction`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
 
 -----
 
 # Environment API
 
-## document
-
-Support the `document` object for common patterns such as listening to document resize, listening to capture or bubble phase events for the entire application (e.g., "outside click" pattern), etc.
+## window
 
-### Properties
+### Events
 
-- [ ] [`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
-- [ ] [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
+* [ ] All W3C events dispatched to components (capture and bubble phase). Resolves proposal [#249](https://github.com/react-native-community/discussions-and-proposals/issues/249).
+* [ ] [`resize`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event).
 
-### Events
+### matchMedia
 
-* [ ] `scroll`.
-* [ ] `visibilitychange`.
+The JavaScript API equivalent of Media Queries. Resolves proposal [#350](https://github.com/react-native-community/discussions-and-proposals/issues/350).
 
-## IntersectionObserver
+### IntersectionObserver
 
 Support the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API for observing the intersection of target elements. This can also be used as a building block for performance tooling.
 
-## MutationObserver
+### MutationObserver
 
 Support the latest [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API for watching changes to the host node tree. This can also be used as a building block for performance tooling.
 
-## ResizeObserver
+### ResizeObserver
 
 Support the latest [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API for responding the changes in the size of elements. Note that this API no longer includes positional coordinates and is optimized for width/height information.
 
+## document
+
+Support the `document` object for common patterns such as listening to document resize, listening to capture or bubble phase events for the entire application (e.g., "outside click" pattern), etc.
+
+### Properties
+
+- [ ] [`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
+- [ ] [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
+
+### Methods
+
+- [ ] [`getElementFromPoint(x,y)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint). Resolves proposal [#501](https://github.com/react-native-community/discussions-and-proposals/issues/501).
+
+### Events
+
+* [ ] [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event).
+* [ ] [`visibilitychange`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event). Can replace the `AppState` API.
 -----
 
 # Components API (DOM subset)
@@ -555,58 +699,58 @@ This would provide a built-in declarative API for cross-platform elements in Rea
 
 Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
 
-* [ ] `article` is equivalent to `View` with `display:block` layout and `role="article"`.
-* [ ] `aside`
-* [ ] `div` is equivalent to `View` with `display:block` layout.
-* [ ] `footer`.
-* [ ] `h1-6`.
-* [ ] `header`.
-* [ ] `main`.
-* [ ] `nav`.
-* [ ] `section` is equivalent to `View` with `display:block` layout and `role="section"`.
+* [ ] [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) is equivalent to `View` with `display:block` layout and `role="article"`.
+* [ ] [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside).
+* [ ] [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is equivalent to `View` with `display:block` layout.
+* [ ] [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer).
+* [ ] [`h1-6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
+* [ ] [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header).
+* [ ] [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main).
+* [ ] [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav).
+* [ ] [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is equivalent to `View` with `display:block` layout and `role="section"`.
 
 ## Text
 
 Text content elements organize blocks or sections of content. Important for accessibility, these elements identify the purpose or structure of that content.
 
-* [ ] `blockquote`.
-* [ ] `li`.
-* [ ] `ol`.
-* [ ] `ul`.
-* [ ] `p`.
-* [ ] `pre`.
+* [ ] [`blockquote`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote).
+* [ ] [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li).
+* [ ] [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol).
+* [ ] [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul).
+* [ ] [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
+* [ ] [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre).
 
 ## Inline text
 
 Inline text semantics define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
 
-* [ ] `a`.
-* [ ] `b`.
-* [ ] `bdi`.
-* [ ] `bdo`.
-* [ ] `code`.
-* [ ] `em`.
-* [ ] `span` is equivalent to `Text` with `display:inline` layout.
-* [ ] `strong`.
-* [ ] `sub`.
-* [ ] `sup`.
+* [ ] [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). (Requires us to figure out how `href` fits into React Native.)
+* [ ] [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b).
+* [ ] [`bdi`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi).
+* [ ] [`bdo`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo).
+* [ ] [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code).
+* [ ] [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em).
+* [ ] [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) is equivalent to `Text` with `display:inline` layout.
+* [ ] [`strong`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong).
+* [ ] [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub).
+* [ ] [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup).
 
 ## Media
 
-* [ ] `img` is equivalent to `Image` without advanced loader configuration.
+* [ ] [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) is similar to `Image` without advanced loader configuration.
 
 ## Forms
 
 Elements which can be used together to create forms which the user can fill out and submit. There's a great deal of further information about this available in the [HTML forms guide](https://developer.mozilla.org/en-US/docs/Learn/Forms).
 
-* [ ] `button`.
-* [ ] `input` is equivalent to `TextInput` with `inputMode` corresponding to `type`.
-* [ ] `label`.
-* [ ] `optgroup`.
-* [ ] `option`.
-* [ ] `progress`.
-* [ ] `select`.
-* [ ] `textarea` is equivalent to `TextInput` with `multiline={true}`.
+* [ ] [`button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
+* [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) is equivalent to `TextInput` with `inputMode` corresponding to `type`. Expanding input type support to number, datetime, color, etc., resolves proposal [#510](https://github.com/react-native-community/discussions-and-proposals/issues/510).
+* [ ] [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
+* [ ] [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup).
+* [ ] [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).
+* [ ] [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
+* [ ] [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+* [ ] [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) is equivalent to `TextInput` with `multiline={true}`.
 
 -----
 
@@ -616,15 +760,19 @@ Subset of cross-platform DOM APIs exposed on element instances, document, etc. T
 
 In practice, this DOM API subset is generally limited to the “best practice” APIs that can safely be used with React DOM (i.e., read-only operations that don’t modify the DOM tree), and most React components should already be limited to this subset.
 
+## Event and CustomEvent
+
+[Event()](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event) and [CustomEvent()](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) represent events initialized by developers and that can be dispatched to elements using `EventTarget.dispatchEvent()`.
+
 ## EventTarget
 
 The `EventTarget` API is implemented in JS environments, and should be available on React Native host elements. This feature is commonly used on web, and could be used by React Native developers to support more complex features without first requiring further core API changes to support each use case.
 
 ### Methods
 
-- [ ] `EventTarget.addEventListener()`. Registers an event handler to a specific event type on the element.
-- [ ] `EventTarget.dispatchEvent()`. Dispatches an event to this node in the DOM and returns a boolean value that indicates whether no handler canceled the event.
-- [ ] `EventTarget.removeEventListener()`. Removes an event listener from the element.
+- [ ] [`EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). Registers an event handler to a specific event type on the element.
+- [ ] [`EventTarget.dispatchEvent()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent). Dispatches an event to this node in the DOM and returns a boolean value that indicates whether no handler canceled the event.
+- [ ] [`EventTarget.removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). Removes an event listener from the element.
 
 ## Node
 
@@ -636,8 +784,9 @@ In some cases, a particular feature of the base Node interface may not apply to
 
 In addition to the properties below, Node inherits methods from its parent, EventTarget.
 
-- [ ] `Node.contains()`. Returns true or false value indicating whether or not a node is a descendant of the calling node.
-- [ ] `Node.getRootNode()`. Returns the context object's root which optionally includes the shadow root if it is available..
+- [ ] [`Node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+- [ ] [`Node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
+- [ ] [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
 
 ## Element
 
@@ -647,61 +796,62 @@ Element is the most general base class from which all element objects (i.e. obje
 
 Element inherits properties from its parent interface, Node, and by extension that interface's parent, EventTarget.
 
-- [ ] `Element.clientHeight` [Read only]. Returns a number representing the inner height of the element.
-- [ ] `Element.clientLeft` [Read only]. Returns a number representing the width of the left border of the element.
-- [ ] `Element.clientTop` [Read only]. Returns a number representing the width of the top border of the element.
-- [ ] `Element.clientWidth` [Read only]. Returns a number representing the inner width of the element.
-- [ ] `Element.id` [Read only]. Is a DOMString representing the id of the element.
-- [ ] `Element.scrollHeight` [Read only]. Returns a number representing the scroll view height of an element.
-- [ ] `Element.scrollLeft`. Is a number representing the left scroll offset of the element.
-- [ ] `Element.scrollLeftMax` [Read only]. Returns a number representing the maximum left scroll offset possible for the element.
-- [ ] `Element.scrollTop`. A number representing number of pixels the top of the element is scrolled vertically.
-- [ ] `Element.scrollTopMax` [Read only]. Returns a number representing the maximum top scroll offset possible for the element.
-- [ ] `Element.scrollWidth` [Read only]. Returns a number representing the scroll view width of the element.
+- [ ] [`Element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
+- [ ] [`Element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
+- [ ] [`Element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
+- [ ] [`Element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
+- [ ] [`Element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
+- [ ] [`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
+- [ ] [`Element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
+- [ ] [`Element.scrollLeftMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax) [Read only]. Returns a number representing the maximum left scroll offset possible for the element.
+- [ ] [`Element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
+- [ ] [`Element.scrollTopMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax) [Read only]. Returns a number representing the maximum top scroll offset possible for the element.
+- [ ] [`Element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
 
 ### Methods
 
 Element inherits methods from its parents Node, and its own parent, EventTarget.
 
-- [ ] `Element.computedStyleMap()`. Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
-- [ ] `Element.getBoundingClientRect()` **P1**. Returns the size of an element and its position relative to the viewport.
-- [ ] `Element.scroll()`. Scrolls to a particular set of coordinates inside a given element.
-- [ ] `Element.scrollBy()`. Scrolls an element by the given amount.
-- [ ] `Element.scrollIntoView()`. Scrolls the page until the element gets into the view.
-- [ ] `Element.scrollTo()`. Scrolls to a particular set of coordinates inside a given element.
+- [ ] [`Element.computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap). Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
+- [ ] [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
+- [ ] [`Element.getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). Returns a collection of `DOMRect` objects that indicate the bounding rectangles for each CSS border box in a client.
+- [ ] [`Element.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll). Scrolls to a particular set of coordinates inside a given element.
+- [ ] [`Element.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy). Scrolls an element by the given amount.
+- [ ] [`Element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Scrolls the page until the element gets into the view.
+- [ ] [`Element.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo). Scrolls to a particular set of coordinates inside a given element.
 
 ### Events
 
 Listen to these events using `addEventListener()` or by assigning an event handler to the equivalent component prop.
 
-- [ ] `error`. Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid. Also available via the `onError` property.
-- [ ] `scroll`. Fired when the document view or an element has been scrolled. Also available via the `onScroll` property.
-- [ ] `select`. Fired when some text has been selected. Also available via the `onSelect` property.
-- [ ] `wheel`. Fired when the user rotates a wheel button on a pointing device (typically a mouse). Also available via the `onWheel` property.
+- [ ] `error`. Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid. Also available via the `on-error` property.
+- [ ] `scroll`. Fired when the document view or an element has been scrolled. Also available via the `on-scroll` property.
+- [ ] `select`. Fired when some text has been selected. Also available via the `on-select` property.
+- [ ] `wheel`. Fired when the user rotates a wheel button on a pointing device (typically a mouse). Also available via the `on-wheel` property.
 
 Clipboard events
 
-- [ ] `copy`. Fired when the user initiates a copy action through the browser's user interface. Also available via the `onCopy` property.
-- [ ] `cut`. Fired when the user initiates a cut action through the browser's user interface. Also available via the `onCut` prop.
-- [ ] `paste`. Fired when the user initiates a paste action through the browser's user interface. Also available via the `onPaste` prop.
+- [ ] [`copy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event). Fired when the user initiates a copy action through the browser's user interface. Also available via the `on-copy` property.
+- [ ] [`cut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event). Fired when the user initiates a cut action through the browser's user interface. Also available via the `on-cut` prop.
+- [ ] [`paste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event). Fired when the user initiates a paste action through the browser's user interface. Also available via the `on-paste` prop.
 
 Focus events
 
-- [ ] `blur`. Fired when an element has lost focus. Also available via the `onBlur` prop.
-- [ ] `focus`. Fired when an element has gained focus. Also available via the `onFocus` prop.
-- [ ] `focusin`. Fired when an element is about to gain focus.
-- [ ] `focusout`. Fired when an element is about to lose focus.
+- [ ] [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event). Fired when an element has lost focus. Also available via the `on-blur` prop.
+- [ ] [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event). Fired when an element has gained focus. Also available via the `on-focus` prop.
+- [ ] [`focusin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event). Fired when an element is about to gain focus.
+- [ ] [`focusout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event). Fired when an element is about to lose focus.
 
 Keyboard events
 
-- [ ] `keydown`. Fired when a key is pressed. Also available via the `onKeyDown` prop.
-- [ ] `keyup`. Fired when a key is released. Also available via the `onKeyUp` prop.
+- [ ] [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event). Fired when a key is pressed. Also available via the `on-keydown` prop.
+- [ ] [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event). Fired when a key is released. Also available via the `on-keyup` prop.
 
 Pointer events
 
-- [ ] `auxclick`. Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element. Also available via the `onAuxClick` prop.
-- [ ] `click`. Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element. Also available via the `onClick` prop.
-- [ ] `contextmenu`. Fired when the user attempts to open a context menu. Also available via the oncontextmenu property.
+- [ ] [`auxclick`](https://www.w3.org/TR/pointerevents3/#the-click-auxclick-and-contextmenu-events). Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element. Also available via the `onAuxClick` prop.
+- [ ] [`click`](https://www.w3.org/TR/pointerevents3/#the-click-auxclick-and-contextmenu-events). Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element. Also available via the `onClick` prop.
+- [ ] [`contextmenu`](https://www.w3.org/TR/pointerevents3/#the-click-auxclick-and-contextmenu-events). Fired when the user attempts to open a context menu. Also available via the oncontextmenu property.
 
 ## HTMLElement
 
@@ -711,20 +861,20 @@ The HTMLElement interface represents any HTML element. Some elements directly im
 
 Inherits properties from its parent, Element, and implements those from DocumentAndElementEventHandlers, GlobalEventHandlers, and TouchEventHandlers.
 
-- [ ] `HTMLElement.hidden` [Read only]. A boolean value indicating if the element is hidden or not.
-- [ ] `HTMLElement.offsetHeight` [Read only]. Returns a double containing the height of an element, relative to the layout.
-- [ ] `HTMLElement.offsetLeft` [Read only]. Returns a double, the distance from this element's left border to its offsetParent's left border.
-- [ ] `HTMLElement.offsetParent` [Read only]. Returns a Element that is the element from which all offset calculations are currently computed.
-- [ ] `HTMLElement.offsetTop` [Read only]. Returns a double, the distance from this element's top border to its offsetParent's top border.
-- [ ] `HTMLElement.offsetWidth` [Read only]. Returns a double containing the width of an element, relative to the layout.
+- [ ] [`HTMLElement.hidden`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden) [Read only]. A boolean value indicating if the element is hidden or not.
+- [ ] [`HTMLElement.offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) [Read only]. Returns a double containing the height of an element, relative to the layout.
+- [ ] [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) [Read only]. Returns a double, the distance from this element's left border to its offsetParent's left border.
+- [ ] [`HTMLElement.offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) [Read only]. Returns a Element that is the element from which all offset calculations are currently computed.
+- [ ] [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) [Read only]. Returns a double, the distance from this element's top border to its offsetParent's top border.
+- [ ] [`HTMLElement.offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth) [Read only]. Returns a double containing the width of an element, relative to the layout.
 
 ### Methods
 
 Inherits methods from its parent, Element, and implements those from DocumentAndElementEventHandlers, GlobalEventHandlers, and TouchEventHandlers.
 
-- [x] `HTMLElement.blur()`. Removes keyboard focus from the currently focused element.
-- [ ] `HTMLElement.click()`. Sends a mouse click event to the element.
-- [ ] `HTMLElement.focus(options)`. Makes the element the current keyboard focus.
+- [x] [`HTMLElement.blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur). Removes keyboard focus from the currently focused element.
+- [ ] [`HTMLElement.click()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click). Sends a mouse click event to the element.
+- [ ] [`HTMLElement.focus(options)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus). Makes the element the current keyboard focus.
 
 ### Events
 
@@ -734,22 +884,23 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 
 Input events
 
-- [ ] `beforeinput`. Fired when the value of an `<input>`, `<select>`, or `<textarea>` element is about to be modified.
-- [ ] `input`. Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `onInput` property.
-- [ ] `change`. Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `onChange` property.
+- [ ] [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element is about to be modified.
+- [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `onInput` property.
+- [ ] [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `onChange` property.
 
 Pointer events
 
-- [ ] `gotpointercapture`. Fired when an element captures a pointer using `setPointerCapture()`. Also available via the `onGotPointerCapture` prop.
-- [ ] `lostpointercapture`. Fired when a captured pointer is released. Also available via the `onLostPointerCapture` prop.
-- [ ] `pointercancel`. Fired when a pointer event is canceled. Also available via the onpointercancel property.
-- [ ] `pointerdown`. Fired when a pointer becomes active. Also available via the onpointerdown property.
-- [ ] `pointerenter`. Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. Also available via the onpointerenter property.
-- [ ] `pointerleave`. Fired when a pointer is moved out of the hit test boundaries of an element. Also available via the onpointerleave property.
-- [ ] `pointermove`. Fired when a pointer changes coordinates. Also available via the onpointermove property.
-- [ ] `pointerout`. Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). Also available via the `onPointerOut` prop.
-- [ ] `pointerover`. Fired when a pointer is moved into an element's hit test boundaries. Also available via the `onPointerOver` prop.
-- [ ] `pointerup`. Fired when a pointer is no longer active. Also available via the `onPointerUp` prop.
+- [ ] [`gotpointercapture`](https://www.w3.org/TR/pointerevents3/#the-gotpointercapture-event). Fired when an element captures a pointer using `setPointerCapture()`. Also available via the `on-gotpointercapture` prop.
+- [ ] [`lostpointercapture`](https://www.w3.org/TR/pointerevents3/#the-lostpointercapture-event). Fired when a captured pointer is released. Also available via the `on-lostpointercapture` prop.
+- [ ] [`pointercancel`](https://www.w3.org/TR/pointerevents3/#the-pointercancel-event). Fired when a pointer event is canceled. Also available via the `on-pointercancel` prop.
+- [ ] [`pointerdown`](https://www.w3.org/TR/pointerevents3/#the-pointerdown-event). Fired when a pointer becomes active. Also available via the `on-pointerdown` prop.
+- [ ] [`pointerenter`](https://www.w3.org/TR/pointerevents3/#the-pointerenter-event). Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. Also available via the `on-pointerenter` prop.
+- [ ] [`pointerleave`](https://www.w3.org/TR/pointerevents3/#the-pointerleave-event). Fired when a pointer is moved out of the hit test boundaries of an element. Also available via the `on-pointerleave` prop.
+- [ ] [`pointermove`](https://www.w3.org/TR/pointerevents3/#the-pointermove-event). Fired when a pointer changes coordinates. Also available via the `on-pointermove` prop.
+- [ ] [`pointerout`](https://www.w3.org/TR/pointerevents3/#the-pointerout-event). Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). Also available via the `on-pointerout` prop.
+- [ ] [`pointerover`](https://www.w3.org/TR/pointerevents3/#the-pointerover-event). Fired when a pointer is moved into an element's hit test boundaries. Also available via the `on-pointerover` prop.
+- [ ] [`pointerrawupdate`](https://www.w3.org/TR/pointerevents3/#the-pointerrawupdate-event). Fired when a pointer changes any properties that don't fire `pointerdown` or `pointerup` events.
+- [ ] [`pointerup`](https://www.w3.org/TR/pointerevents3/#the-pointerup-event). Fired when a pointer is no longer active. Also available via the `on-pointerup` prop.
 
 ## HTMLImageElement
 
@@ -759,15 +910,15 @@ The HTMLImageElement interface represents an HTML `<img>` element, providing the
 
 Inherits properties from its parent, HTMLElement.
 
-- [ ] `HTMLImageElement.complete` [Read only]. Returns a boolean value that is true if the browser has finished fetching the image, whether successful or not. That means this value is also true if the image has no src value indicating an image to load.
-- [ ] `HTMLImageElement.currentSrc` [Read only]. Returns a USVString representing the URL from which the currently displayed image was loaded. This may change as the image is adjusted due to changing conditions, as directed by any media queries which are in place.
-- [ ] `HTMLImageElement.naturalHeight` [Read only]. Returns an integer value representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0. This is the height the image would be if it were rendered at its natural full size.
-- [ ] `HTMLImageElement.naturalWidth` [Read only]. An integer value representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0. This is the width the image would be if it were rendered at its natural full size.
+- [ ] [`HTMLImageElement.complete`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete) [Read only]. Returns a boolean value that is true if the browser has finished fetching the image, whether successful or not. That means this value is also true if the image has no src value indicating an image to load.
+- [ ] [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) [Read only]. Returns a USVString representing the URL from which the currently displayed image was loaded. This may change as the image is adjusted due to changing conditions, as directed by any media queries which are in place.
+- [ ] [`HTMLImageElement.naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight) [Read only]. Returns an integer value representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0. This is the height the image would be if it were rendered at its natural full size.
+- [ ] [`HTMLImageElement.naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) [Read only]. An integer value representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0. This is the width the image would be if it were rendered at its natural full size.
 
 ### Events
 
-- [ ] `error`. Also available via the `onError` prop.
-- [ ] `load`. Also available via the `onLoad` prop.
+- [ ] `error`. Also available via the `on-error` prop.
+- [ ] `load`. Also available via the `on-load` prop.
 
 ## HTMLInputElement
 
@@ -777,24 +928,24 @@ The HTMLInputElement interface provides special properties and methods for manip
 
 Properties that apply only to visible elements containing text or numbers
 
-- [ ] `selectionEnd`. unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
-- [ ] `selectionStart`. unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element.
-- [ ] `selectionDirection`. string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
-- [ ] `value`. string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
+- [ ] [`selectionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionend). unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
+- [ ] [`selectionStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionstart). unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element.
+- [ ] [`selectionDirection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectiondirection). string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
+- [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value). string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
 
 ### Methods
 
-- [ ] `select()`. Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
-- [ ] `setSelectionRange()`. Selects a range of text in the input element (but does not focus it).
-- [ ] `showPicker()`. Shows a browser picker for date, time, color, and files.
+- [ ] [`select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select). Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
+- [ ] [`setSelectionRange()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange). Selects a range of text in the input element (but does not focus it).
+- [ ] [`showPicker()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker). Shows a browser picker for date, time, color, and files.
 
 ### Events
 
 Listen to these events using `addEventListener()` or by assigning an event listener to the oneventname property of this interface:
 
-- [ ] `input`. Fires when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Note that this is actually fired on the HTMLElement interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements. Also available via the `onInput` prop.
-- [ ] `invalid`. Fired when an element does not satisfy its constraints during constraint validation. Also available via the `onInvalid` prop.
-- [ ] `selectionchange` event **P1**. Fires when the text selection in a <input> element has been changed. Also available via the `onSelectionChange` prop.
+- [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fires when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Note that this is actually fired on the HTMLElement interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements. Also available via the `onInput` prop.
+- [ ] [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event). Fired when an element does not satisfy its constraints during constraint validation. Also available via the `onInvalid` prop.
+- [ ] [`selectionchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event) event. Fires when the text selection in a <input> element has been changed. Also available via the `onSelectionChange` prop.
 
 ## HTMLTextAreaElement
 
@@ -834,4 +985,4 @@ Other tasks that will help to reduce API fragmentation within React Native, and
 * [ ] Move `FlatList` out of core and into a separate package in the monorepo.
 * [ ] Move `SectionList` out of core and into a separate package in the monorepo.
 * [ ] Strip flow types and JSX from pacakges published to npm (make this the default for the community).
-* [ ] Prevent libraries importing `'react-native'` package internals, by using the Node.js package exports API.
+* [ ] Prevent libraries importing `'react-native'` package internals, by using the [Node.js package exports API](https://nodejs.org/api/packages.html#package-entry-points).

From a68a85fd8604ddddd7d619a896518c468aafcea6 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Tue, 31 Jan 2023 13:07:05 -0800
Subject: [PATCH 08/11] React DOM for Native

---
 proposals/0000-reduce-fragmentation.md | 1397 ++++++++++++------------
 1 file changed, 728 insertions(+), 669 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index 60b187df..bcae5013 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -1,16 +1,16 @@
 ---
-title: Reduce API fragmentation across platforms
+title: React DOM for Native
 author:
 - Nicolas Gallagher
 date: 2022-08-03
-updated: 2022-11-29
+updated: 2023-01-31
 ---
 
-# RFC: Reduce API fragmentation across platforms
+# RFC: React DOM for Native
 
 ## Summary
 
-This is a proposal to incrementally reduce the API fragmentation faced by developers using React to target multiple platforms with code shared between native and web. The proposed cross-platform user interface APIs are a subset of existing web standards for DOM, CSS, and HTML - "Strict DOM". Each proposed change is additive and does not require migration of existing React Native UI code (deprecations are optional / follow up work). Incremental progress will reduce the fragmentation between React Native and React DOM components.
+This is a proposal to incrementally reduce the API fragmentation faced by developers using React to target multiple platforms via code shared between native and web. The proposed cross-platform user interface APIs are a subset of existing web standards for DOM, CSS, and HTML - "Strict DOM". The proposed changes are overwhelmingly additive and do not require migration of existing React Native UI code (deprecations are optional / follow up work). Incremental progress can help to reduce the fragmentation between React Native and React DOM components, while the ability to run React DOM code (with minor modifications) on native is a longer-term goal.
 
 ## Motivation
 
@@ -21,158 +21,82 @@ This proposal aims to allow developers to target more platforms with cross-platf
 * minimize the overhead when running in browsers;
 * reduce developer education required to learn features;
 * set clear and cohesive API end-state expectations for contributors to aim for;
+* accelerate the framework's development by avoiding API design costs;
 * support backwards compatibility;
 * develop universal codebases.
 
-React Native for Web uses React DOM and native DOM APIs to shim React Native components and APIs on the web. The tooling for an existing React DOM app simply maps the 'react-native' export to 'react-native-web'. This is the most complete and widely used shim, but comes with considerable DX and UX costs on the web.
+The existing solution for targeting web with React Native is to use React Native for Web. React Native for Web is a user-space library built on top of React DOM and native DOM APIs. It shims React Native components and APIs on the web. The tooling for an existing React DOM app simply maps the 'react-native' export to 'react-native-web'.
 
 ![](https://user-images.githubusercontent.com/239676/205388174-6fce19f1-8b3a-4c6e-82f1-89ef9c21ab7d.png)
 
-Implementing a Strict DOM subset in React Native shifts the weight of bridging native and web apps onto React Native Native, where it can be done most efficiently. On the web, we would combine React DOM with stylex.
+This is the most complete and widely used shim, but comes with considerable DX and UX costs on the web. The shim must implement a large surface area of fragmented APIs, and it needs to modify standard APIs and objects (e.g., events) to match React Native's non-standard implementations.
+
+In contrast, implementing a "Strict DOM" subset in React Native shifts the weight of bridging native and web apps onto React Native, where it can be done most efficiently. Although React Native will not support all the features available on web, it will still support a greater expanded feature set relative to React Native today. On the web, we would only need to combine React DOM with a white-label CSS compiler like stylex.
 
 ![](https://user-images.githubusercontent.com/239676/205388313-e58f8793-51cd-4a6e-86e7-89425fd2d0e1.png)
 
 ## Detailed design
 
-The overall work involved is broken down into 5 sections.
+The "complete" API involved is broken down into the following sections.
 
-* [Props API](#props-api-react-dom-subset). React DOM component props to add to existing React Native components.
-* [Styling API](#styles-api-css-subset). CSS APIs to add to React Native environment.
 * [Environment API](#environment-api). Global APIs to add to the host environment.
-* [Components API](#components-api-dom-subset). React DOM components to add to React Native.
 * [Elements API](#elements-api-dom-subset). DOM APIs to add to host component instances.
-* [Other maintenance](#other-maintenance). Misc tasks to reduce fragmentation.
-
-## Implementation strategy
-
-Where possible we should make these changes to the native code. However, we will prioritize user-space shims in JavaScript where they are faster to ship and allow us to gather feedback/support for this overall direction.
-
-To further reduce risk, the underlying abstractions that we use to implement this proposed "Strict DOM/CSS" API should be flexible enough to support alternative APIs that can co-exist with (or replace) both what is proposed here as well as the existing React Native APIs.
-
-## Adoption strategy
-
-Many of these additions are already in progress and have been proven in a user-space shim at Meta. But a lot of the proposed features require core changes to React Native.
-
-To encourage React Native library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers will adopt these APIs if they wish to support web.
-
-## How we teach this
-
-Teaching these APIs is simplified by developer familiarity with existing DOM / React DOM APIs.
-
-## Drawbacks
-
-Many of these features can be shimmed in user-space, at the cost of runtime overhead for native or web platforms. The runtime overhead for web is untenable. The runtime overhead of shifting shims into the React Native JS has yet to be established.
-
-This adds redundancy to the React Native API, as the proposal is to make additive changes and avoid requiring removal of existing APIs in the short term.
-
-We have to be very intentional about how much compatibility with open web standards we can promise. Some cross-platform limitations are rooted in significant differences in the host platforms APIs (e.g., accessibility) and the lack of 99% compat may frustrate users.
-
-This proposal does not include concrete plans for how to support low-level navigation (i.e., `href`) on React Native. This is a crucial aspect of web accessibility and must be incorporated in a future revision.
-
------
-
-# Props API (React DOM subset)
-
-One of the fastest and simplest ways to reduce fragmentation between React DOM and React Native is to support more React DOM props on the existing React Native components. This will help to reduce the network and runtime overhead of using React Native for Web, as it will be able to reduce the amount of code responsible for mapping React Native APIs to React DOM APIs. For developers familiar with React DOM, there will be less of a learning curve to applying that knowledge to React Native.
+* [Components API](#components-api-dom-subset). React DOM components to add to React Native.
+* [Props API](#props-api-react-dom-subset). React DOM component props to add to new components, and existing React Native components as part of an incremental strategy.
+* [Styling API](#styles-api-css-subset). CSS APIs to add to the React Native environment.
 
-## Core components
 
-The core components `View` and `Text`.
+A simplified example of the user-space code we'd aim to support is as follows:
 
-### Primitive props
+```js
+import { html, css } from 'react-native/dom';
+
+export function VStackPanel(props) {
+  const connectedCallback = function (node) {
+    const handler = () => {
+      const { offsetWidth } = e.target;
+      // ...
+    };
+    const options = { capture: true };
+    node.addEventListener('pointerdown', handler, options);
+    return function disconnected() {
+      node.removeEventListener('pointerdown', handler, options)
+    }
+  };
+
+  return (
+    // Use HTML element
+    <html.div
+      children={props.children}
+      // Synchronous click event that matches W3C event type
+      on-click={props.click}
+      // Use HTMLElement instance API
+      ref={connectedCallback}
+      // Use optimized styles
+      style={css(
+        { flexDirection: 'column', flex: 1 },
+        props.style
+      )}
+    />
+  )
+}
+```
 
-Certain props common to all core components have direct equivalents in React DOM. We should support those props on native where possible and allow the others in the types definition. Supporting the ARIA 1.2 interface would allow more ARIA-targeting React DOM libraries to work on React Native, and would provide a well defined cross-platform target for equivalent native features (e.g., React Native for Windows needing heading levels, set size, etc.)
+But there are many incremental steps that can be taken along the way.
 
-- [ ] [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus).
-- [ ] [`aria-activedescendant`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant).
-- [ ] [`aria-atomic`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic).
-- [ ] [`aria-autocomplete`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete).
-- [x] [`aria-busy`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy) is the same as `accessibilityState.busy`.
-- [x] [`aria-checked`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) is the same as `accessibilityState.checked`.
-- [ ] [`aria-colcount`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount).
-- [ ] [`aria-colindex`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex).
-- [ ] [`aria-colindextext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext)
-- [ ] [`aria-colspan`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan).
-- [ ] [`aria-controls`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
-- [ ] [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-- [ ] [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is the same as [`accessibilityDescribedBy`](https://cs.github.com/microsoft/react-native-windows/blob/8ea39fa9737c81516e3cad495ed0e2ae939412ce/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewWin32.Props.ts#L159-L165) (Desktop).
-- [ ] ([`aria-description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description))
-- [ ] [`aria-details`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details).
-- [x] [`aria-disabled`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) is the same as `accessibilityState.disabled`.
-- [ ] [`aria-errormessage`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage) is similar to [`accessibilityErrorMessage`](https://github.com/facebook/react-native/pull/33468).
-- [x] [`aria-expanded`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) is the same as `accessibilityState.expanded`.
-- [ ] [`aria-flowto`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto).
-- [ ] [`aria-haspopup`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup).
-- [x] [`aria-hidden`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) is the same as `accessibilityElementsHidden` (iOS) / `importantforAccessibility` (Android).
-- [ ] [`aria-invalid`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid).
-- [ ] [`aria-keyshortcuts`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts).
-- [x] [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) is the same as `accessibilityLabel`.
-- [x] [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) is the same as `accessibilityLabelledBy` (Android, Desktop).
-- [ ] [`aria-level`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level) is the same as [`accessibilityLevel`](https://github.com/microsoft/react-native-windows/blob/ab330f691477cad43c19b58ab8ce767a1c5baf58/packages/%40office-iss/react-native-win32/src/Libraries/Components/View/ViewWin32.Props.ts#L182-L186) (Desktop).
-- [x] [`aria-live`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) is the same as `accessibilityLiveRegion` with `'off'` value changed to `'none'` (Android).
-- [x] [`aria-modal`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal) is the same as `accessibilityViewIsModal` (iOS).
-- [ ] [`aria-multiline`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline).
-- [ ] [`aria-multiselectable`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable).
-- [ ] [`aria-orientation`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation).
-- [ ] [`aria-owns`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns).
-- [ ] [`aria-placeholder`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder).
-- [ ] [`aria-posinset`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) is the same as [`accessibilityPosInSet`](https://github.com/microsoft/react-native-windows/blob/5dbd74b1852c38f851483478d6da7d81949d0195/vnext/src/Libraries/Components/View/ViewWindowsProps.ts#L42-L47) (Desktop)
-- [ ] [`aria-pressed`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
-- [ ] [`aria-readonly`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly).
-- [ ] [`aria-required`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required).
-- [ ] [`aria-roledescription`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription).
-- [ ] [`aria-rowcount`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount).
-- [ ] [`aria-rowindex`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex).
-- [ ] [`aria-rowindextext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext).
-- [ ] [`aria-rowspan`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan).
-- [x] [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) is the same as `accessibilityState.selected`.
-- [ ] [`aria-setsize`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) is the same as [`accessibilitySetSize`](https://github.com/microsoft/react-native-windows/blob/5dbd74b1852c38f851483478d6da7d81949d0195/vnext/src/Libraries/Components/View/ViewWindowsProps.ts#L49-L54) (Desktop).
-- [ ] [`aria-sort`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort).
-- [x] [`aria-valuemax`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) is the same as `accessibilityValue.max`.
-- [x] [`aria-valuemin`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) is the same as `accessibilityValue.min`.
-- [x] [`aria-valuenow`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) is the same as `accessibilityValue.now`.
-- [x] [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) is the same as `accessibilityValue.text`.
-- [ ] ([`data-*`]() props. Resolves proposal [#323](https://github.com/react-native-community/discussions-and-proposals/issues/323))
-- [ ] [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) configures element's layout / writing direction.
-- [ ] [`elementTiming`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming).
-- [ ] [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) identifies the language of the text content.
-- [ ] [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) is the same as `display:'none'`.
-- [x] [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) is the same as `nativeID`.
-- [ ] [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert).
-- [x] [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) is the same as `accessibilityRole` (with support for web values).
-- [x] `style` is unchanged.
-- [x] [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) is the same as `focusable` (Android, Desktop). Add support for `0` and `-1` values only.
+## Implementation and adoption strategy
 
-### Event props
+The proposal is to support both an incremental adoption strategy, as well as a separate "React DOM" bindings exports. The incremental strategy would find ways to align existing APIs in React Native with their React DOM equivalents, and gradually deprecate the non-standard APIs. Whereas the separate bindings export would be designed to provide most of what is needed for a direct compatibility layer with React DOM.
 
-Props for commonly handled events should also be supported on core components. Each event handler should receive a W3C event object of the corresponding type, not a synthetic event. These props are merely conveniences and otherwise identical to using the `EventTarget` API mentioned later on. Note that no capture phase props are included, as listening to the capture phase (as well as custom events) should be handled with the `EventTarget` API.
+This would ensure a significant amount of overlap between the existing React Native components and the dedicated "React DOM" compatibility API, allowing for co-mingling of code and reduced developer education. There is no suggestion of deprecating the current React Native components and APIs at this stage.
 
-To avoid breaking changes in React Native and React DOM, it may be preferrable to create new event prop names that receive events as specified by web standards, e.g., `on-click`, `on-pointerup`.
+### Reduce API fragmentation across platforms
 
-Resolves proposal [#492](https://github.com/react-native-community/discussions-and-proposals/issues/492).
+The initial step is to incrementally reduce existing API fragmenetation across platforms. This involves consolidating the different props, styles, and events for similar functionality across different platforms. The APIs that we consolidate upon are the W3C standards, as React Native is already fairly closely aligned with these standards.
 
-- [ ] `on-auxclick` is a `PointerEvent` for auxillary clicks.
-- [ ] `on-blur`.
-- [ ] `on-click` is a `PointerEvent` for primary clicks.
-- [ ] `on-contextmenu` is a `PointerEvent` for context clicks / long press.
-- [ ] `on-copy`.
-- [ ] `on-cut`.
-- [ ] `on-focus`.
-- [ ] `on-gotpointercapture`.
-- [ ] `on-lostpointercapture`.
-- [ ] `on-paste`.
-- [ ] `on-pointercancel`.
-- [ ] `on-pointerdown`.
-- [ ] `on-pointerenter`.
-- [ ] `on-pointerleave`.
-- [ ] `on-pointermove`.
-- [ ] `on-pointerout`.
-- [ ] `on-pointerover`.
-- [ ] `on-pointerup`.
-- [ ] `on-keydown`.
-- [ ] `on-keyup`.
+Doing this will make it easier for web developers to work with React Native's existing components and related APIs. This is the path for developers to gradually migrate their existing React Native code into a form that is more aligned with the web. And it will allow React Native for Web to be smaller and faster, providing better results on web via the existing tools that developers use today.
 
-Example:
+One example of this kind of incremental change is to map props in the existing core components (i.e., `View`, `Text`, etc.) to the W3C equivalents: `id` to `nativeID`, `aria-label` to `accessibilityLabel`, and so on. React Native for Web currently "owns" this translation step, but we would instead move it into React Native to claw back performance on web. For developers familiar with React DOM, there will be less of a learning curve to applying that knowledge to React Native.
 
 ```jsx
 <View
@@ -186,35 +110,6 @@ Example:
 >
 ```
 
-## `Image` component
-
-Inherits all props and events from "Core Component".
-
-### Primitive props
-
-Various React DOM `img` props have direct equivalents in React Native. For example, `srcSet` is a subset of the `source` prop but without support for specifying headers, etc. Features like alternative text content are also required to target web.
-
-- [x] [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt) prop for alternative text support.
-- [x] [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin) is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure cross-origin permissions for loaded images.
-- [ ] [`decoding`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-decoding).
-- [ ] `draggable`.
-- [ ] [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority).
-- [x] [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height) is the same as `source.height`.
-- [ ] [`loading`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading).
-- [x] [`referrerPolicy`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy) is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure referrer policy.
-- [x] [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src) is the same as `source.uri`.
-- [x] [`srcSet`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) is the same as setting a `source` array with `uri` and `scale` properties defined.
-- [x] [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width) is the same as `source.width`.
-
-Longer-term we should look to decouple the image component from the image loader. The latter could take the form of a module and/or hook to provide the props needed for a simpler image component as is found in React DOM.
-
-### Event props
-
-- [ ] [`on-error`](https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event)
-- [ ] `on-load`
-
-Example:
-
 ```jsx
 <Image
   alt="Alternative text"
@@ -224,45 +119,6 @@ Example:
 >
 ```
 
-## `TextInput` component
-
-Inherits all props and events from "Core Component".
-
-### Primitive props
-
-- [x] [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
-- [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-- [x] [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) is the same as mapped values for `returnKeyType`.
-- [x] [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)  is the same as mapped values for `keyboardType`.
-  - [x] `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`.
-  - [x] `inputMode === 'email'` is the same as `keyboardType = 'email-address'`.
-  - [x] `inputMode === 'none'` is the same as `showSoftInputOnFocus = false`.
-  - [x] `inputMode === 'numeric'` is the same as `keyboardType = 'numeric'`.
-  - [x] `inputMode === 'search'` is the same as `keyboardType = 'search'`.
-  - [x] `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`.
-  - [x] `inputMode === 'url'` is the same as `keyboardType = 'url'`.
-- [ ] [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max).
-- [x] [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength).
-- [ ] [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min).
-- [ ] [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength).
-- [ ] [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder).
-- [x] [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly) is the same as inverse `editable`.
-- [ ] [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required).
-- [x] [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) is the same as `numberOfLines`.
-- [ ] [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck).
-- [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value).
-
-### Event props
-
-- [ ] `on-beforeinput`
-- [ ] `on-change`
-- [ ] `on-input`
-- [ ] `on-invalid`
-- [ ] `on-select`
-- [ ] `on-selectionchange`
-
-Example:
-
 ```jsx
 <TextArea
   autoComplete="email"
@@ -276,9 +132,27 @@ Example:
 />
 ```
 
-## Appendix
+Example of how to map `srcSet` to `source`:
+
+```js
+const { crossOrigin, referrerPolicy, srcSet } = props;
+const source = [];
+const srcList = srcSet.split(', ');
+srcList.forEach((src) => {
+  const [uri, xscale] = src.split(' ');
+  const scale = parseInt(xscale.split('x')[0], 10);
+  const headers = {};
+  if (crossOrigin === 'use-credentials') {
+    headers['Access-Control-Allow-Credentials'] = true;
+  }
+  if (referrerPolicy != null) {
+    headers['Referrer-Policy'] = referrerPolicy;
+  }
+  source.push({ headers, height, scale, uri, width });
+});
+```
 
-`autoComplete` mapping:
+Example of how to map `autoComplete` to Android's `autoComplete` and iOS's `textContentType`:
 
 ```js
 // https://reactnative.dev/docs/textinput#autocomplete-android
@@ -343,515 +217,215 @@ const autoCompleteIOS = {
 };
 ```
 
-`srcSet` to `source` mapping:
-
-```js
-const { crossOrigin, referrerPolicy, srcSet } = props;
-const source = [];
-const srcList = srcSet.split(', ');
-srcList.forEach((src) => {
-  const [uri, xscale] = src.split(' ');
-  const scale = parseInt(xscale.split('x')[0], 10);
-  const headers = {};
-  if (crossOrigin === 'use-credentials') {
-    headers['Access-Control-Allow-Credentials'] = true;
-  }
-  if (referrerPolicy != null) {
-    headers['Referrer-Policy'] = referrerPolicy;
-  }
-  source.push({ headers, height, scale, uri, width });
-});
-```
-
------
-
-# Styles API (CSS subset)
-
-The styling capabilities of React Native should be significantly expanded to cover more of the features that are heavily relied upon by web engineers. Furthermore, React Native needs to gracefully handle unknown style properties or values as is expected on the web. Rather than hard crashing it could print warnings to bring attention to any styles that are not currently supported on native.
+Where possible we should make these changes to the native code. However, we will prioritize user-space shims in JavaScript where they are faster to ship and allow us to gather feedback/support for this overall direction.
 
-## StyleSheet
+Beyond props, there is also the opportunity to reduce fragementation in styling APIs.
 
+* [ ] Don't hard crash on unknown or invalid style properties and values.
 * [ ] Deprecate `StyleSheet.absoluteFill`. Use `position:'absolute';inset:0;` instead.
 * [ ] Deprecate `StyleSheet.absoluteFillObject`.
 * [ ] Deprecate `StyleSheet.compose()`. Use existing `[ a, b ]` syntax instead.
 * [ ] Deprecate `StyleSheet.flatten()`. This API encourages runtime introspection of styles in render calls. This pattern is a performance cost (flattening arrays of objects), and prevents us from supporting build-time optimizations for web (e.g., extracting styles to CSS files).
 * [ ] Deprecate or rename `setStyleAttributePreprocessor` (e.g., `unstable_setStyleAttributePreprocessor`).
 * [ ] `StyleSheet.create()` should obfuscate styles to prevent introspection (i.e., revert identify function change). On web, we need to be able to remove the JavaScript style objects from bundles to support build-time optimization like extraction to CSS files.
-* [ ] `StyleSheet` should be a function that returns native props, e.g., `const nativeProps = StyleSheet(...styles)`. On web, this is used to pass DOM `className` and `style` props, whereas on native it can be used to pass flattened/transformed styles and any other other native props to native components.
 
-## CSS Compatibility
+To encourage React Native library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers must adopt these APIs if they wish to support web.
 
-Existing properties that can be adjusted to align with the CSS spec.
+### Crate a separate package or export for DOM bindings
 
-* [x] [`aspectRatio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio). Support string values, i.e., `'16 / 9'`, to align with CSS.
-* [x] [`borderRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). Support percentage values to align with CSS.
-* [x] [`fontVariant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) support space-separated string values to align with CSS.
-* [x] [`fontWeight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) support number values to align with React DOM / CSS.
-* [x] [`objectFit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) is equivalent to `resizeMode` for `<Image>`.
-* [x] [`pointerEvents`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) is equivalent to `pointerEvents` prop.
-* [ ] [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position). Support for `fixed` and `sticky` values.
-* [x] [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform). Support using string values to set transforms.
-* [x] [`verticalAlign`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) is equivalent to `textAlignVertical`.
-* [x] [`userSelect`](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select). Equivalent to using `selectable` prop on `<Text>`.
+The next step would be to begin exporting separate React DOM bindings from React Native. This would aim to allow code originally written with React DOM to run on React Native with only minor modifications. There would be no need to use React Native for Web, and the web layer in this scenario would be a lot smaller, limited mostly to implementing the modern W3C events API and integrating a style API that allows for static extraction to optimized CSS.
 
-Existing logical properties that can be adjusted to adopt the CSS standard names. In addition, React Native will need to add native support for subtree-level writing direction controls. Setting the `dir` prop (or `direction` style) to `ltr` or `rtl` on an element should alter the way logical properties are resolved in the subtree.
+Even this can be done in incremental fashion, with early (user-space) prototypes to get feedback. Most tags can be mapped to existing React Native components and props, in the reverse of the [mapping used by React Native for Web](https://github.com/necolas/react-native-web/blob/b2eb3ca03ffc4b8570591b6c2082c6e4edae0e7f/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12-L30).
 
-* [ ] (`direction`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) on web, and we should consider removing it in favor of the `dir` prop.)
-* [ ] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
-* [ ] `borderEndStartRadius` is equivalent to `borderBottomStartRadius`.
-* [ ] `borderStartEndRadius` is equivalent to `borderTopEndRadius`.
-* [ ] `borderStartStartRadius` is equivalent to `borderTopStartRadius`.
-* [ ] `borderBlockColor` is equivalent to `borderTopColor` & `borderBottomColor`.
-* [ ] `borderBlockEndColor` is equivalent to `borderBottomColor`.
-* [ ] `borderBlockStartColor` is equivalent to `borderTopColor`.
-* [ ] `borderInlineColor` is equivalent to `borderEndColor` & `borderStartColor`.
-* [ ] `borderInlineEndColor` is equivalent to `borderEndColor`.
-* [ ] `borderInlineStartColor` is equivalent to `borderStartColor`.
-* [ ] `borderBlockStyle` is equivalent to `borderTopStyle` & `borderBottomStyle`.
-* [ ] `borderBlockEndStyle` is equivalent to `borderBottomStyle`.
-* [ ] `borderBlockStartStyle` is equivalent to `borderTopStyle`.
-* [ ] `borderInlineStyle` is equivalent to `borderEndStyle` & `borderStartStyle`.
-* [ ] `borderInlineEndStyle` is equivalent to `borderEndStyle`.
-* [ ] `borderInlineStartStyle` is equivalent to `borderStartStyle`.
-* [ ] `borderBlockWidth` is equivalent to `borderTopWidth` & `borderBottomWidth`.
-* [ ] `borderBlockEndWidth` is equivalent to `borderBottomWidth`.
-* [ ] `borderBlockStartWidth` is equivalent to `borderTopWidth`.
-* [ ] `borderInlineWidth` is equivalent to `borderEndWidth` & `borderStartWidth`.
-* [ ] `borderInlineEndWidth` is equivalent to `borderEndWidth`.
-* [ ] `borderInlineStartWidth` is equivalent to `borderStartWidth`.
-* [x] `marginInlineStart` is equivalent to `marginStart`.
-* [x] `marginInlineEnd` is equivalent to `marginEnd`.
-* [x] `marginBlockStart` is equivalent to `marginTop`.
-* [x] `marginBlockEnd` is equivalent to `marginBottom`.
-* [x] `marginBlock` is equivalent to `marginVertical`.
-* [x] `marginInline` is equivalent to `marginHorizontal`.
-* [x] `paddingInlineStart` is equivalent to `paddingStart`.
-* [x] `paddingInlineEnd` is equivalent to `paddingEnd`.
-* [x] `paddingBlockStart` is equivalent to `paddingTop`.
-* [x] `paddingBlockEnd` is equivalent to `paddingBottom`.
-* [x] `paddingBlock` is equivalent to `paddingVertical`.
-* [x] `paddingInline` is equivalent to `paddingHorizontal`.
-* [x] `inset` is equivalent to `top` & `bottom` & `right` & `left`.
-* [x] `insetBlock` is equivalent to `top` & `bottom`.
-* [x] `insetBlockEnd` is equivalent to `bottom`.
-* [x] `insetBlockStart` is equivalent to `top`.
-* [x] `insetInline` is equivalent to `right` & `left`.
-* [x] `insetInlineEnd` is equivalent to `right` or `left`.
-* [x] `insetInlineStart` is equivalent to `right` or `left`.
-
-## CSS Animations
-
-Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C animation events too. See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
-
-- [ ] [`animationDelay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)
-- [ ] [`animationDirection`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
-- [ ] [`animationDuration`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)
-- [ ] [`animationFillMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)
-- [ ] [`animationIterationCount`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)
-- [ ] [`animationName`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name)
-- [ ] [`animationPlayState`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)
-- [ ] [`animationTimingFunction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
+### Equivalent API for Web
 
-TBD: the relationship between `animationName` (or equivalent) and the API used to define Animation keyframes.
+In parallel, a user-space layer over React DOM would ensure equivalent APIs between native and web, by converging them both towards a desired the "end state" where the differences between React Native and React DOM are erased while landing on a "modern" flavor of React DOM.
 
-## CSS Colors
+The benefit of initially doing this in user-space is that it reduces the burden of complex migratations for React Native and React DOM (e.g., the changes to React DOM event types, the `style` prop, and explicit imports of component types), while allowing us to validate and iterate on the proposed end-state APIs with interested parties. This is currently blocked on OSS-ing of stylex.
 
-Support CSS 4 Colors, possibly by using [Colorjs.io](https://colorjs.io/) or implementing a native equivalent.
+## How we teach this
 
-## CSS Container Queries
+Teaching these APIs is simplified by developer familiarity with existing DOM / React DOM APIs.
 
-Prepare for [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries).
+## Drawbacks
 
-## CSS Custom Properties
+Many of these features can be shimmed in user-space, at the cost of runtime overhead for native or web platforms. The runtime overhead for web is untenable. The runtime overhead of shifting shims into the React Native JS has yet to be established.
 
-Support CSS custom property syntax `--variable-name`. This could be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
+This adds redundancy to the React Native API, as the proposal is to make additive changes and avoid requiring removal of existing APIs in the short term.
 
-* [`CSS Variables`](https://w3c.github.io/csswg-drafts/css-variables/)
-* [Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-* [`var()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+We have to be very intentional about how much compatibility with open web standards we can promise. Some cross-platform limitations are rooted in significant differences in the host platforms APIs (e.g., accessibility) and the lack of 99% compat may frustrate users.
 
-## CSS Filters
+Aiming for a degree of React DOM compatibility shifts the burden of missing features onto React Native. Developers may not be used to an API that is complete on web but partially implemented on native platforms.
 
-Support declarative filters as used by the CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) style.
+-----
 
-* [ ] [`blur()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur)
-* [ ] [`brightness()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness)
-* [ ] [`contrast()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast)
-* [ ] [`drop-shadow()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow)
-* [ ] [`grayscale()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale)
-* [ ] [`hue-rotate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate)
-* [ ] [`invert()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert)
-* [ ] [`opacity()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity)
-* [ ] [`saturate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate)
-* [ ] [`sepia()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia)
+# Environment APIs
 
-## CSS Functions
+## `window`
 
-* [ ] [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
-* [ ] [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)
-* [ ] [`max()`](https://developer.mozilla.org/en-US/docs/Web/CSS/max)
-* [ ] [`min()`](https://developer.mozilla.org/en-US/docs/Web/CSS/min)
-* [ ] [`minmax()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)
-* [ ] [`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/url)
-* [ ] [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+### Events
 
-## CSS Lengths
+* [ ] Receives all W3C events dispatched to components (capture and bubble phase). Resolves proposal [#249](https://github.com/react-native-community/discussions-and-proposals/issues/249).
+* [ ] Dispatches [`resize`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event).
 
-Support major units where supported by CSS.
+### Properties
 
-* [ ] [`em`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
-* [ ] [`rem`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
-* [ ] `px` units.
-* [ ] [`v*`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
-* [ ] [`%`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages) units.
+* [ ] [`devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
+* [ ] [`navigator`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)
+  * [ ] [`clipboard`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard)
+  * [ ] [`languages`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages)
+  * [ ] [`permissions`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions)
+  * [ ] [`vibrate()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate)
+* [`performance`](https://developer.mozilla.org/en-US/docs/Web/API/performance_property)
 
-## CSS Media Queries
+### Methods
 
-Support CSS Media Queries.
+* [ ] `addEventListener()`
+* [ ] `dispatchEvent()`
+* [ ] `removeEventListener()`
 
-Although Media Queries are not a preferred long-term solution for responsive design, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers. The dimensional Media Queries could be shimmed in user-space on top of the existing `StyleSheet` API.
+### APIs
 
-Logical operators `not`, `and`, `or`, `only`.
+* [ ] [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
+* [ ] [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). Resolves proposal [#350](https://github.com/react-native-community/discussions-and-proposals/issues/350).
+* [ ] [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API for observing the intersection of target elements. This can also be used as a building block for performance tooling.
+* [ ] [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API for watching changes to the host node tree. This can also be used as a building block for performance tooling.
+* [ ] [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API for responding the changes in the size of elements. Note that this API no longer includes positional coordinates and is optimized for width/height information.
 
-[Media features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features):
+## `document`
 
-- [ ] [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio)
-- [ ] [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)
-- [ ] [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height)
-- [ ] [`inverted-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)
-- [ ] [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation)
-- [ ] [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
-- [ ] [`prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)
-- [ ] [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
-- [ ] [`resolution`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution)
-- [ ] [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
+Support the `document` object for common patterns such as listening to visibility changes, and listening to capture or bubble phase events for the entire application (e.g., "outside click" pattern), etc.
 
-Proposed syntax:
+### Events
 
-```js
-// Either
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    '@media (max-width: 600px)': {
-      position: 'sticky',
-    }
-  }
-});
+* [ ] [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event).
+* [ ] [`visibilitychange`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event). Can replace the `AppState` API.
 
-// Or
-const styles = StyleSheet.create({
-  root: {
-    position: {
-      default: 'absolute',
-      '@media (max-width: 600px)': 'sticky',
-    }
-  }
-});
-```
+### Properties
 
-The benefit of the latter is clearer expectations (and greater constraints) about when properties are overridden. For example, it's not as clear what the value for `position` would be in the following:
+- [ ] [`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
+- [ ] [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
 
-```js
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    '@media (max-width: 600px)': {
-      position: 'sticky',
-    }
-  },
-  override: {
-    position: 'relative',
-  }
-});
+### Methods
 
-const style = [ styles.root, styles.override ];
-// {
-//   position: relative,
-//   '@media (max-width: 600px)': {
-//     position: 'sticky',
-//   }
-// }
-```
+- [ ] [`getElementFromPoint(x,y)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint). Resolves proposal [#501](https://github.com/react-native-community/discussions-and-proposals/issues/501).
 
-Whereas in the next example we can set expectations that a property *and any previous conditions* are completed overridden by any declaration that later modifies the property in any way.
+-----
 
-```js
-const styles = StyleSheet.create({
-  root: {
-    position: {
-      default: 'absolute',
-      '@media (max-width: 600px)': 'sticky'
-    }
-  },
-  override: {
-    position: {
-      default: 'relative',
-    }
-  }
-});
+# Elements API (DOM subset)
 
-const style = [ styles.root, styles.override ];
-// {
-//   position: relative
-// }
-```
+Subset of cross-platform DOM APIs exposed on element instances. This would be an imperative API for working with the Shadow tree in React Native. Based on data from [MDN Web API](https://developer.mozilla.org/en-US/docs/Web/API), please refer to the MDN links for complete DOM APIs and comment if you believe any should be included in the proposed subset.
 
-Consideration is also required to determine what the final value of a property is when Media Query conditions overlap, i.e., which media features and which conditions (e.g., multiple `width` conditions) take priority over others.
+In practice, this DOM API subset is generally limited to the “best practice” APIs that can safely be used with React DOM (i.e., read-only operations that don’t modify the DOM tree), and most React components should already be limited to this subset. One of the important details of this API are how it supports the different ways of [determining the dimensions of elements](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements).
 
-## CSS Properties and Values
+## EventTarget
 
-Miscellaneous CSS properties and values that should be supported on native.
+The `EventTarget` API is implemented in JS environments, and should be available on React Native host elements. This feature is commonly used on web, and could be used by React Native developers to support more complex features without first requiring further core API changes to support each use case.
 
-* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients.
-* [ ] [`backgroundOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).
-* [ ] [`backgroundPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
-* [ ] [`backgroundRepeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
-* [ ] [`backgroundSize`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
-* [ ] [`boxSizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
-* [ ] [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles.
-* [ ] [`caretColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color).
-* [ ] [`clipPath`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
-* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`.
-* [ ] [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float).
-* [ ] [`justifySelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). Sets the way a box is justified inside its alignment container along the appropriate axis.
-* [ ] ([`lineClamp`](https://www.w3.org/TR/css-overflow-3/#propdef-line-clamp) is equivalent to `numberOfLines` prop on `<Text>` components).
-* [ ] [`objectPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position).
-* [ ] [`overflowBlock`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block).
-* [ ] [`overflowInline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline).
-* [ ] [`overflowX`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x).
-* [ ] [`overflowY`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y).
-* [ ] [`placeContent`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content). Shorthand for setting `alignContent` and `justifyContent`. Value is an enum of `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `safe`, `space-around`, `space-between`, `space-evenly`, `start`, `stretch`, `unsafe`. Note that `space-evenly` should also be supported for `alignContent` and `justifyContent`.
-* [ ] [`placeItems`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items). Shorthand for setting `alignItems` and `justifyItems`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `start`, `stretch`.
-* [ ] [`placeSelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self). Shorthand for setting `alignSelf` and `justifySelf`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `normal`, `right`, `start`, `stretch`.
-* [ ] [`rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate).
-* [ ] [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale).
-* [ ] [`scrollSnap*`](https://drafts.csswg.org/css-scroll-snap-1/#overview)
-* [ ] `textShadow`. Add native support for CSS text shadows.
-* [ ] [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).
-* [ ] [`transformStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style). Resolves proposal [#425](https://github.com/react-native-community/discussions-and-proposals/issues/425).
-* [ ] [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate).
-* [ ] [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility). Add support for visually hiding elements.
-* [ ] [`whiteSpace`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space).
+### Methods
 
-## CSS Transitions
+- [ ] [`EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). Registers an event handler to a specific event type on the element.
+- [ ] [`EventTarget.dispatchEvent()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent). Dispatches an event to this node in the DOM and returns a boolean value that indicates whether no handler canceled the event.
+- [ ] [`EventTarget.removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). Removes an event listener from the element.
 
-Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C transition events too.
+## Event and CustomEvent
 
-- [ ] [`transitionDelay`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
-- [ ] [`transitionDuration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)
-- [ ] [`transitionProperty`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
-- [ ] [`transitionTimingFunction`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
+[Event()](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event) and [CustomEvent()](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) represent events initialized by developers and that can be dispatched to elements using `EventTarget.dispatchEvent()`.
 
------
+## Node
 
-# Environment API
+The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. All objects that implement Node functionality are based on one of its subclasses. Every kind of host node is represented by an interface based on Node.
 
-## window
+In some cases, a particular feature of the base Node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances.
 
-### Events
+### Methods
 
-* [ ] All W3C events dispatched to components (capture and bubble phase). Resolves proposal [#249](https://github.com/react-native-community/discussions-and-proposals/issues/249).
-* [ ] [`resize`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event).
+Node inherits methods from its parent, EventTarget.
 
-### matchMedia
+- [ ] [`Node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+- [ ] [`Node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
+- [ ] [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
 
-The JavaScript API equivalent of Media Queries. Resolves proposal [#350](https://github.com/react-native-community/discussions-and-proposals/issues/350).
+## Element
 
-### IntersectionObserver
+Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
 
-Support the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API for observing the intersection of target elements. This can also be used as a building block for performance tooling.
+### Properties
 
-### MutationObserver
+Element inherits properties from its parent interface, Node, and by extension that interface's parent, EventTarget.
 
-Support the latest [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API for watching changes to the host node tree. This can also be used as a building block for performance tooling.
+- [ ] [`Element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
+- [ ] [`Element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
+- [ ] [`Element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
+- [ ] [`Element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
+- [ ] [`Element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
+- [ ] [`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
+- [ ] [`Element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
+- [ ] [`Element.scrollLeftMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax) [Read only]. Returns a number representing the maximum left scroll offset possible for the element.
+- [ ] [`Element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
+- [ ] [`Element.scrollTopMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax) [Read only]. Returns a number representing the maximum top scroll offset possible for the element.
+- [ ] [`Element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
 
-### ResizeObserver
+### Methods
 
-Support the latest [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API for responding the changes in the size of elements. Note that this API no longer includes positional coordinates and is optimized for width/height information.
+Element inherits methods from its parents Node, and its own parent, EventTarget.
 
-## document
+- [ ] [`Element.computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap). Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
+- [ ] [`Element.getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute). Returns the value of a specified attribute on the element.
+- [ ] [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
+- [ ] [`Element.getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). Returns a collection of `DOMRect` objects that indicate the bounding rectangles for each CSS border box in a client.
+- [ ] [`Element.hasAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute). Returns a Boolean value indicating whether the specified element has the specified attribute or not.
+- [ ] [`Element.hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture). Checks whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+- [ ] [`Element.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll). Scrolls to a particular set of coordinates inside a given element.
+- [ ] [`Element.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy). Scrolls an element by the given amount.
+- [ ] [`Element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Scrolls the page until the element gets into the view.
+- [ ] [`Element.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo). Scrolls to a particular set of coordinates inside a given element.
+- [ ] [`Element.setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture). Used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released.
+- [ ] [`Element.releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture). Releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.
 
-Support the `document` object for common patterns such as listening to document resize, listening to capture or bubble phase events for the entire application (e.g., "outside click" pattern), etc.
+### Events
 
-### Properties
+Listen to these events using `addEventListener()` or by assigning an event handler to the equivalent component prop.
 
-- [ ] [`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
-- [ ] [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
+- [ ] `error`. Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid. Also available via the `on-error` property.
+- [ ] `scroll`. Fired when the document view or an element has been scrolled. Also available via the `on-scroll` property.
+- [ ] `select`. Fired when some text has been selected. Also available via the `on-select` property.
+- [ ] `wheel`. Fired when the user rotates a wheel button on a pointing device (typically a mouse). Also available via the `on-wheel` property.
 
-### Methods
+Clipboard events
 
-- [ ] [`getElementFromPoint(x,y)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint). Resolves proposal [#501](https://github.com/react-native-community/discussions-and-proposals/issues/501).
+- [ ] [`copy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event). Fired when the user initiates a copy action through the browser's user interface. Also available via the `on-copy` property.
+- [ ] [`cut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event). Fired when the user initiates a cut action through the browser's user interface. Also available via the `on-cut` prop.
+- [ ] [`paste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event). Fired when the user initiates a paste action through the browser's user interface. Also available via the `on-paste` prop.
 
-### Events
+Focus events
 
-* [ ] [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event).
-* [ ] [`visibilitychange`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event). Can replace the `AppState` API.
------
+- [ ] [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event). Fired when an element has lost focus. Also available via the `on-blur` prop.
+- [ ] [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event). Fired when an element has gained focus. Also available via the `on-focus` prop.
+- [ ] [`focusin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event). Fired when an element is about to gain focus.
+- [ ] [`focusout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event). Fired when an element is about to lose focus.
 
-# Components API (DOM subset)
+Keyboard events
 
-A logical extension of support more React DOM props is to support a subset of React DOM components directly.
+- [ ] [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event). Fired when a key is pressed. Also available via the `on-keydown` prop.
+- [ ] [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event). Fired when a key is released. Also available via the `on-keyup` prop.
 
-This would provide a built-in declarative API for cross-platform elements in React Native. All unknown tags default to `<span>` layout. All known-but-unimplemented block-level tags default to `<div>` layout. Most tags can be mapped to existing React Native components and props, in the reverse of the [mapping used by React Native for Web](https://github.com/necolas/react-native-web/blob/b2eb3ca03ffc4b8570591b6c2082c6e4edae0e7f/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12-L30).
-
-## Sections
-
-Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
-
-* [ ] [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) is equivalent to `View` with `display:block` layout and `role="article"`.
-* [ ] [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside).
-* [ ] [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is equivalent to `View` with `display:block` layout.
-* [ ] [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer).
-* [ ] [`h1-6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
-* [ ] [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header).
-* [ ] [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main).
-* [ ] [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav).
-* [ ] [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is equivalent to `View` with `display:block` layout and `role="section"`.
-
-## Text
-
-Text content elements organize blocks or sections of content. Important for accessibility, these elements identify the purpose or structure of that content.
-
-* [ ] [`blockquote`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote).
-* [ ] [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li).
-* [ ] [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol).
-* [ ] [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul).
-* [ ] [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
-* [ ] [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre).
-
-## Inline text
-
-Inline text semantics define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
-
-* [ ] [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). (Requires us to figure out how `href` fits into React Native.)
-* [ ] [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b).
-* [ ] [`bdi`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi).
-* [ ] [`bdo`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo).
-* [ ] [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code).
-* [ ] [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em).
-* [ ] [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) is equivalent to `Text` with `display:inline` layout.
-* [ ] [`strong`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong).
-* [ ] [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub).
-* [ ] [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup).
-
-## Media
-
-* [ ] [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) is similar to `Image` without advanced loader configuration.
-
-## Forms
-
-Elements which can be used together to create forms which the user can fill out and submit. There's a great deal of further information about this available in the [HTML forms guide](https://developer.mozilla.org/en-US/docs/Learn/Forms).
-
-* [ ] [`button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
-* [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) is equivalent to `TextInput` with `inputMode` corresponding to `type`. Expanding input type support to number, datetime, color, etc., resolves proposal [#510](https://github.com/react-native-community/discussions-and-proposals/issues/510).
-* [ ] [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
-* [ ] [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup).
-* [ ] [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).
-* [ ] [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
-* [ ] [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
-* [ ] [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) is equivalent to `TextInput` with `multiline={true}`.
-
------
-
-# Elements API (DOM subset)
-
-Subset of cross-platform DOM APIs exposed on element instances, document, etc. This would be an imperative API for working with the Shadow tree in React Native. Based on data from [MDN Web API](https://developer.mozilla.org/en-US/docs/Web/API), please refer to the MDN links for complete DOM APIs and comment if you believe any should be included in the proposed subset.
-
-In practice, this DOM API subset is generally limited to the “best practice” APIs that can safely be used with React DOM (i.e., read-only operations that don’t modify the DOM tree), and most React components should already be limited to this subset.
-
-## Event and CustomEvent
-
-[Event()](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event) and [CustomEvent()](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) represent events initialized by developers and that can be dispatched to elements using `EventTarget.dispatchEvent()`.
-
-## EventTarget
-
-The `EventTarget` API is implemented in JS environments, and should be available on React Native host elements. This feature is commonly used on web, and could be used by React Native developers to support more complex features without first requiring further core API changes to support each use case.
-
-### Methods
-
-- [ ] [`EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). Registers an event handler to a specific event type on the element.
-- [ ] [`EventTarget.dispatchEvent()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent). Dispatches an event to this node in the DOM and returns a boolean value that indicates whether no handler canceled the event.
-- [ ] [`EventTarget.removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). Removes an event listener from the element.
-
-## Node
-
-The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Every kind of host node is represented by an interface based on Node.
-
-In some cases, a particular feature of the base Node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances.
-
-### Methods
-
-In addition to the properties below, Node inherits methods from its parent, EventTarget.
-
-- [ ] [`Node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-- [ ] [`Node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
-- [ ] [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
-
-## Element
-
-Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
-
-### Properties
-
-Element inherits properties from its parent interface, Node, and by extension that interface's parent, EventTarget.
-
-- [ ] [`Element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
-- [ ] [`Element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
-- [ ] [`Element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
-- [ ] [`Element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
-- [ ] [`Element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
-- [ ] [`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
-- [ ] [`Element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
-- [ ] [`Element.scrollLeftMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax) [Read only]. Returns a number representing the maximum left scroll offset possible for the element.
-- [ ] [`Element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
-- [ ] [`Element.scrollTopMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax) [Read only]. Returns a number representing the maximum top scroll offset possible for the element.
-- [ ] [`Element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
-
-### Methods
-
-Element inherits methods from its parents Node, and its own parent, EventTarget.
-
-- [ ] [`Element.computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap). Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
-- [ ] [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
-- [ ] [`Element.getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). Returns a collection of `DOMRect` objects that indicate the bounding rectangles for each CSS border box in a client.
-- [ ] [`Element.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll). Scrolls to a particular set of coordinates inside a given element.
-- [ ] [`Element.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy). Scrolls an element by the given amount.
-- [ ] [`Element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Scrolls the page until the element gets into the view.
-- [ ] [`Element.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo). Scrolls to a particular set of coordinates inside a given element.
-
-### Events
-
-Listen to these events using `addEventListener()` or by assigning an event handler to the equivalent component prop.
-
-- [ ] `error`. Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid. Also available via the `on-error` property.
-- [ ] `scroll`. Fired when the document view or an element has been scrolled. Also available via the `on-scroll` property.
-- [ ] `select`. Fired when some text has been selected. Also available via the `on-select` property.
-- [ ] `wheel`. Fired when the user rotates a wheel button on a pointing device (typically a mouse). Also available via the `on-wheel` property.
-
-Clipboard events
-
-- [ ] [`copy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event). Fired when the user initiates a copy action through the browser's user interface. Also available via the `on-copy` property.
-- [ ] [`cut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event). Fired when the user initiates a cut action through the browser's user interface. Also available via the `on-cut` prop.
-- [ ] [`paste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event). Fired when the user initiates a paste action through the browser's user interface. Also available via the `on-paste` prop.
-
-Focus events
-
-- [ ] [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event). Fired when an element has lost focus. Also available via the `on-blur` prop.
-- [ ] [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event). Fired when an element has gained focus. Also available via the `on-focus` prop.
-- [ ] [`focusin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event). Fired when an element is about to gain focus.
-- [ ] [`focusout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event). Fired when an element is about to lose focus.
-
-Keyboard events
-
-- [ ] [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event). Fired when a key is pressed. Also available via the `on-keydown` prop.
-- [ ] [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event). Fired when a key is released. Also available via the `on-keyup` prop.
-
-Pointer events
+Pointer events
 
 - [ ] [`auxclick`](https://www.w3.org/TR/pointerevents3/#the-click-auxclick-and-contextmenu-events). Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element. Also available via the `onAuxClick` prop.
 - [ ] [`click`](https://www.w3.org/TR/pointerevents3/#the-click-auxclick-and-contextmenu-events). Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element. Also available via the `onClick` prop.
 - [ ] [`contextmenu`](https://www.w3.org/TR/pointerevents3/#the-click-auxclick-and-contextmenu-events). Fired when the user attempts to open a context menu. Also available via the oncontextmenu property.
+- [ ] [`gotpointercapture`](https://www.w3.org/TR/pointerevents3/#the-gotpointercapture-event). Fired when an element captures a pointer using `setPointerCapture()`. Also available via the `on-gotpointercapture` prop.
+- [ ] [`lostpointercapture`](https://www.w3.org/TR/pointerevents3/#the-lostpointercapture-event). Fired when a captured pointer is released. Also available via the `on-lostpointercapture` prop.
+- [ ] [`pointercancel`](https://www.w3.org/TR/pointerevents3/#the-pointercancel-event). Fired when a pointer event is canceled. Also available via the `on-pointercancel` prop.
+- [ ] [`pointerdown`](https://www.w3.org/TR/pointerevents3/#the-pointerdown-event). Fired when a pointer becomes active. Also available via the `on-pointerdown` prop.
+- [ ] [`pointerenter`](https://www.w3.org/TR/pointerevents3/#the-pointerenter-event). Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. Also available via the `on-pointerenter` prop.
+- [ ] [`pointerleave`](https://www.w3.org/TR/pointerevents3/#the-pointerleave-event). Fired when a pointer is moved out of the hit test boundaries of an element. Also available via the `on-pointerleave` prop.
+- [ ] [`pointermove`](https://www.w3.org/TR/pointerevents3/#the-pointermove-event). Fired when a pointer changes coordinates. Also available via the `on-pointermove` prop.
+- [ ] [`pointerout`](https://www.w3.org/TR/pointerevents3/#the-pointerout-event). Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). Also available via the `on-pointerout` prop.
+- [ ] [`pointerover`](https://www.w3.org/TR/pointerevents3/#the-pointerover-event). Fired when a pointer is moved into an element's hit test boundaries. Also available via the `on-pointerover` prop.
+- [ ] [`pointerrawupdate`](https://www.w3.org/TR/pointerevents3/#the-pointerrawupdate-event). Fired when a pointer changes any properties that don't fire `pointerdown` or `pointerup` events.
+- [ ] [`pointerup`](https://www.w3.org/TR/pointerevents3/#the-pointerup-event). Fired when a pointer is no longer active. Also available via the `on-pointerup` prop.
 
 ## HTMLElement
 
@@ -880,27 +454,9 @@ Inherits methods from its parent, Element, and implements those from DocumentAnd
 
 Listen to these events using `addEventListener()` or by assigning an event listener to the equivalent component prop.
 
-- [ ] `invalid`. Fired when an element does not satisfy its constraints during constraint validation. Also available via the `onInvalid` prop.
-
-Input events
-
 - [ ] [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element is about to be modified.
-- [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `onInput` property.
-- [ ] [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `onChange` property.
-
-Pointer events
-
-- [ ] [`gotpointercapture`](https://www.w3.org/TR/pointerevents3/#the-gotpointercapture-event). Fired when an element captures a pointer using `setPointerCapture()`. Also available via the `on-gotpointercapture` prop.
-- [ ] [`lostpointercapture`](https://www.w3.org/TR/pointerevents3/#the-lostpointercapture-event). Fired when a captured pointer is released. Also available via the `on-lostpointercapture` prop.
-- [ ] [`pointercancel`](https://www.w3.org/TR/pointerevents3/#the-pointercancel-event). Fired when a pointer event is canceled. Also available via the `on-pointercancel` prop.
-- [ ] [`pointerdown`](https://www.w3.org/TR/pointerevents3/#the-pointerdown-event). Fired when a pointer becomes active. Also available via the `on-pointerdown` prop.
-- [ ] [`pointerenter`](https://www.w3.org/TR/pointerevents3/#the-pointerenter-event). Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. Also available via the `on-pointerenter` prop.
-- [ ] [`pointerleave`](https://www.w3.org/TR/pointerevents3/#the-pointerleave-event). Fired when a pointer is moved out of the hit test boundaries of an element. Also available via the `on-pointerleave` prop.
-- [ ] [`pointermove`](https://www.w3.org/TR/pointerevents3/#the-pointermove-event). Fired when a pointer changes coordinates. Also available via the `on-pointermove` prop.
-- [ ] [`pointerout`](https://www.w3.org/TR/pointerevents3/#the-pointerout-event). Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). Also available via the `on-pointerout` prop.
-- [ ] [`pointerover`](https://www.w3.org/TR/pointerevents3/#the-pointerover-event). Fired when a pointer is moved into an element's hit test boundaries. Also available via the `on-pointerover` prop.
-- [ ] [`pointerrawupdate`](https://www.w3.org/TR/pointerevents3/#the-pointerrawupdate-event). Fired when a pointer changes any properties that don't fire `pointerdown` or `pointerup` events.
-- [ ] [`pointerup`](https://www.w3.org/TR/pointerevents3/#the-pointerup-event). Fired when a pointer is no longer active. Also available via the `on-pointerup` prop.
+- [ ] [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `on-change` property.
+- [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `on-input` property.
 
 ## HTMLImageElement
 
@@ -928,8 +484,9 @@ The HTMLInputElement interface provides special properties and methods for manip
 
 Properties that apply only to visible elements containing text or numbers
 
+- [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled).
 - [ ] [`selectionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionend). unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
-- [ ] [`selectionStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionstart). unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element.
+- [ ] [`selectionStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionstart). unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. (Resolves issue (#35616)[https://github.com/facebook/react-native/pull/35616].)
 - [ ] [`selectionDirection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectiondirection). string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
 - [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value). string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
 
@@ -943,9 +500,9 @@ Properties that apply only to visible elements containing text or numbers
 
 Listen to these events using `addEventListener()` or by assigning an event listener to the oneventname property of this interface:
 
-- [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fires when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Note that this is actually fired on the HTMLElement interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements. Also available via the `onInput` prop.
-- [ ] [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event). Fired when an element does not satisfy its constraints during constraint validation. Also available via the `onInvalid` prop.
-- [ ] [`selectionchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event) event. Fires when the text selection in a <input> element has been changed. Also available via the `onSelectionChange` prop.
+- [ ] [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event). Fired when an element does not satisfy its constraints during constraint validation. Also available via the `on-invalid` prop.
+- [ ] [`select`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event) event. Fired when some text has been selected.
+- [ ] [`selectionchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event) event. Fires when the text selection in a `<input>` element has been changed. Also available via the `on-selectionchange` prop.
 
 ## HTMLTextAreaElement
 
@@ -953,6 +510,7 @@ The HTMLInputElement interface provides special properties and methods for manip
 
 ### Properties
 
+- [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled).
 - [ ] `selectionEnd`. unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
 - [ ] `selectionStart`. unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the `<textarea>` element.
 - [ ] `selectionDirection`. string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
@@ -967,22 +525,523 @@ The HTMLInputElement interface provides special properties and methods for manip
 
 Listen to these events using `addEventListener()` or using the equivalent prop name.
 
-- [ ] `input`. Fires when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed.  Also available via the `onInput` prop.
-- [ ] `selectionchange`. Fires when the text selection in a `<textarea>` element has been changed.  Also available via the `onSelectionChange` prop.
+- [ ] [`select`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event) event. Fired when some text has been selected.
+- [ ] [`selectionchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event) event. Fires when the text selection in a `<input>` element has been changed. Also available via the `on-selectionchange` prop.
+
+-----
+
+# Components API (React DOM subset)
+
+Support a subset of React DOM components directly. Exported as an `html` object, i.e., `html.div`, `html.a`, etc.
+
+This would provide a built-in declarative API for cross-platform elements in React Native. All unknown tags default to `<span>` layout. All known-but-unimplemented block-level tags default to `<div>` layout.
+
+## Sections
+
+Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
+
+* [ ] [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) is equivalent to `View` with `display:block` layout and `role="article"`.
+* [ ] [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside).
+* [ ] [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is equivalent to `View` with `display:block` layout.
+* [ ] [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer).
+* [ ] [`h1-6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
+* [ ] [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header).
+* [ ] [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main).
+* [ ] [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav).
+* [ ] [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is equivalent to `View` with `display:block` layout and `role="section"`.
+
+## Text
+
+Text content elements organize blocks or sections of content. Important for accessibility, these elements identify the purpose or structure of that content.
+
+* [ ] [`blockquote`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote).
+* [ ] [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li).
+* [ ] [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol).
+* [ ] [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul).
+* [ ] [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
+* [ ] [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre).
+
+## Inline text
+
+Inline text semantics define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
+
+* [ ] [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
+* [ ] [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b).
+* [ ] [`bdi`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi).
+* [ ] [`bdo`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo).
+* [ ] [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code).
+* [ ] [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em).
+* [ ] [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) is equivalent to `Text` with `display:inline` layout.
+* [ ] [`strong`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong).
+* [ ] [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub).
+* [ ] [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup).
+
+## Media
+
+* [ ] [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) is similar to `Image` without advanced loader configuration.
+
+## Forms
+
+Elements which can be used together to create forms which the user can fill out and submit. There's a great deal of further information about this available in the [HTML forms guide](https://developer.mozilla.org/en-US/docs/Learn/Forms).
+
+* [ ] [`button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
+* [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) is equivalent to `TextInput` with `inputMode` corresponding to `type`. Expanding input type support to number, datetime, color, etc., resolves proposal [#510](https://github.com/react-native-community/discussions-and-proposals/issues/510).
+* [ ] [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
+* [ ] [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup).
+* [ ] [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).
+* [ ] [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
+* [ ] [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+* [ ] [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) is equivalent to `TextInput` with `multiline={true}`.
 
 -----
 
-# Other maintenance
+# Props API (React DOM subset)
+
+Support a subset of React DOM props.
+
+## Common props
+
+Props supported on all elements.
 
-Other tasks that will help to reduce API fragmentation within React Native, and between React Native and React Native for Web. Large, user-space modules currently exported from the `react-native` package could eventually be moved entirely to separate packages, reducing the size of the core library on native and web, and allowing alternative solutions to compete on a level playing field. JavaScript from the React Native ecosystem should not be published to npm without removal of non-standard syntax.
+Supporting the ARIA 1.2 interface would allow more ARIA-targeting React DOM libraries to work on React Native, and would provide a well defined cross-platform target for equivalent native features (e.g., React Native for Windows needing heading levels, set size, etc.)
 
-* [ ] Deprecate the `Touchable*` components. Use `Pressable`.
-* [ ] Add `hovered` state support to `Pressable`.
-* [ ] Add `focused` state support to `Pressable`.
-* [ ] Move `Animated` out of core and into a separate package in the monorepo.
-* [ ] Move `VirtualizedList` out of core and into a separate package in the monorepo.
-* [ ] Move `VirtualizedSectionList` out of core and into a separate package in the monorepo.
-* [ ] Move `FlatList` out of core and into a separate package in the monorepo.
-* [ ] Move `SectionList` out of core and into a separate package in the monorepo.
-* [ ] Strip flow types and JSX from pacakges published to npm (make this the default for the community).
-* [ ] Prevent libraries importing `'react-native'` package internals, by using the [Node.js package exports API](https://nodejs.org/api/packages.html#package-entry-points).
+- [ ] [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus).
+- [ ] [`aria-activedescendant`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant).
+- [ ] [`aria-atomic`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic).
+- [ ] [`aria-autocomplete`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete).
+- [x] [`aria-busy`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy) is the same as `accessibilityState.busy`.
+- [x] [`aria-checked`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) is the same as `accessibilityState.checked`.
+- [ ] [`aria-colcount`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount).
+- [ ] [`aria-colindex`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex).
+- [ ] [`aria-colindextext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext)
+- [ ] [`aria-colspan`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan).
+- [ ] [`aria-controls`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
+- [ ] [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+- [ ] [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is the same as [`accessibilityDescribedBy`](https://cs.github.com/microsoft/react-native-windows/blob/8ea39fa9737c81516e3cad495ed0e2ae939412ce/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewWin32.Props.ts#L159-L165) (Desktop).
+- [ ] ([`aria-description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description))
+- [ ] [`aria-details`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details).
+- [x] [`aria-disabled`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) is the same as `accessibilityState.disabled`.
+- [ ] [`aria-errormessage`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage) is similar to [`accessibilityErrorMessage`](https://github.com/facebook/react-native/pull/33468).
+- [x] [`aria-expanded`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) is the same as `accessibilityState.expanded`.
+- [ ] [`aria-flowto`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto).
+- [ ] [`aria-haspopup`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup).
+- [x] [`aria-hidden`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) is the same as `accessibilityElementsHidden` (iOS) / `importantforAccessibility` (Android).
+- [ ] [`aria-invalid`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid).
+- [ ] [`aria-keyshortcuts`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts).
+- [x] [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) is the same as `accessibilityLabel`.
+- [x] [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) is the same as `accessibilityLabelledBy` (Android, Desktop).
+- [ ] [`aria-level`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level) is the same as [`accessibilityLevel`](https://github.com/microsoft/react-native-windows/blob/ab330f691477cad43c19b58ab8ce767a1c5baf58/packages/%40office-iss/react-native-win32/src/Libraries/Components/View/ViewWin32.Props.ts#L182-L186) (Desktop).
+- [x] [`aria-live`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) is the same as `accessibilityLiveRegion` with `'off'` value changed to `'none'` (Android).
+- [x] [`aria-modal`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal) is the same as `accessibilityViewIsModal` (iOS).
+- [ ] [`aria-multiline`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline).
+- [ ] [`aria-multiselectable`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable).
+- [ ] [`aria-orientation`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation).
+- [ ] [`aria-owns`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns).
+- [ ] [`aria-placeholder`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder).
+- [ ] [`aria-posinset`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) is the same as [`accessibilityPosInSet`](https://github.com/microsoft/react-native-windows/blob/5dbd74b1852c38f851483478d6da7d81949d0195/vnext/src/Libraries/Components/View/ViewWindowsProps.ts#L42-L47) (Desktop)
+- [ ] [`aria-pressed`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
+- [ ] [`aria-readonly`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly).
+- [ ] [`aria-required`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required).
+- [ ] [`aria-roledescription`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription).
+- [ ] [`aria-rowcount`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount).
+- [ ] [`aria-rowindex`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex).
+- [ ] [`aria-rowindextext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext).
+- [ ] [`aria-rowspan`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan).
+- [x] [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) is the same as `accessibilityState.selected`.
+- [ ] [`aria-setsize`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) is the same as [`accessibilitySetSize`](https://github.com/microsoft/react-native-windows/blob/5dbd74b1852c38f851483478d6da7d81949d0195/vnext/src/Libraries/Components/View/ViewWindowsProps.ts#L49-L54) (Desktop).
+- [ ] [`aria-sort`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort).
+- [x] [`aria-valuemax`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) is the same as `accessibilityValue.max`.
+- [x] [`aria-valuemin`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) is the same as `accessibilityValue.min`.
+- [x] [`aria-valuenow`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) is the same as `accessibilityValue.now`.
+- [x] [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) is the same as `accessibilityValue.text`.
+- [ ] ([`data-*`]() props. Resolves proposal [#323](https://github.com/react-native-community/discussions-and-proposals/issues/323))
+- [ ] [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) configures element's layout / writing direction.
+- [ ] [`elementTiming`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming).
+- [ ] [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) identifies the language of the text content.
+- [ ] [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) is the same as `display:'none'`.
+- [x] [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) is the same as `nativeID`.
+- [ ] [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert).
+- [x] [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) is the same as `accessibilityRole` (with support for web values).
+- [x] `style` is unchanged from existing React Native.
+- [x] [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) is the same as `focusable` (Android, Desktop). Add support for `0` and `-1` values only.
+
+## Common events
+
+Events supported on all elements.
+
+Each event handler should receive a W3C event object of the corresponding type, not a synthetic event. These props are merely conveniences and otherwise identical to using the `EventTarget` API mentioned later on. Note that no capture phase props are included, as listening to the capture phase (as well as custom events) can be handled with the `EventTarget` API. (Alternatively, we introduce `oncapture-click`, etc.)
+
+To avoid breaking changes in React Native and React DOM, it may be preferrable to create new event prop names that receive events as specified by web standards, e.g., `on-click`, `on-pointerup`.
+
+Resolves proposal [#492](https://github.com/react-native-community/discussions-and-proposals/issues/492).
+
+- [ ] `on-auxclick` is a `PointerEvent` for auxillary clicks.
+- [ ] `on-blur`.
+- [ ] `on-click` is a `PointerEvent` for primary clicks.
+- [ ] `on-contextmenu` is a `PointerEvent` for context clicks / long press.
+- [ ] `on-copy`.
+- [ ] `on-cut`.
+- [ ] `on-focus`.
+- [ ] `on-gotpointercapture`.
+- [ ] `on-lostpointercapture`.
+- [ ] `on-paste`.
+- [ ] `on-pointercancel`.
+- [ ] `on-pointerdown`.
+- [ ] `on-pointerenter`.
+- [ ] `on-pointerleave`.
+- [ ] `on-pointermove`.
+- [ ] `on-pointerout`.
+- [ ] `on-pointerover`.
+- [ ] `on-pointerup`.
+- [ ] `on-keydown`.
+- [ ] `on-keyup`.
+
+## `<a>` props
+
+- [ ] [`download`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download).
+- [ ] [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href). Clicking will always attempt to open the URL in a browser, mail client, etc. Use of `e.preventDefault()` in an event handler will disable this behavior and allow custom routing logic to handle the interaction.
+- [ ] [`referredPolicy`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy).
+- [ ] [`rel`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel).
+- [ ] [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target).
+
+## `<img>` props
+
+Additional props for `<img>`.
+
+- [x] [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt) prop for alternative text support.
+- [x] [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin) is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure cross-origin permissions for loaded images.
+- [ ] [`decoding`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-decoding).
+- [ ] `draggable`.
+- [ ] [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority).
+- [x] [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height) is the same as `source.height`.
+- [ ] [`loading`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading).
+- [x] [`referrerPolicy`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy) is equivalent to setting the relevant `Header` in the `source` object. Declaratively configure referrer policy.
+- [x] [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src) is the same as `source.uri`.
+- [x] [`srcSet`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) is the same as setting a `source` array with `uri` and `scale` properties defined.
+- [x] [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width) is the same as `source.width`.
+
+## `<img>` events
+
+Additional events for `<img>`.
+
+- [ ] [`on-error`](https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event)
+- [ ] `on-load`
+
+## `<input>` and `<textarea>` props
+
+Additional props for `<input>` and `<textarea>`.
+
+- [x] [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
+- [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+- [x] [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) is the same as mapped values for `returnKeyType`.
+- [x] [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)  is the same as mapped values for `keyboardType`.
+  - [x] `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`.
+  - [x] `inputMode === 'email'` is the same as `keyboardType = 'email-address'`.
+  - [x] `inputMode === 'none'` is the same as `showSoftInputOnFocus = false`.
+  - [x] `inputMode === 'numeric'` is the same as `keyboardType = 'numeric'`.
+  - [x] `inputMode === 'search'` is the same as `keyboardType = 'search'`.
+  - [x] `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`.
+  - [x] `inputMode === 'url'` is the same as `keyboardType = 'url'`.
+- [ ] [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max).
+- [x] [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength).
+- [ ] [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min).
+- [ ] [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength).
+- [ ] [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder).
+- [x] [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly) is the same as inverse `editable`.
+- [ ] [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required).
+- [x] [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) is the same as `numberOfLines` (`<textarea>` only).
+- [ ] [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck).
+- [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value).
+
+## `<input>` and `<textarea>` events
+
+Additional events for `<input>` and `<textarea>`.
+
+- [ ] `on-beforeinput`
+- [ ] `on-change`
+- [ ] `on-input`
+- [ ] `on-invalid`
+- [ ] `on-select`
+- [ ] `on-selectionchange`
+
+-----
+
+# Styles API (CSS subset)
+
+Significantly expanded styling capabilities to cover more of the features that are heavily relied upon by web engineers. Styles are used with the `css()` function and are passed to the `style` prop on elements.
+
+## `css()` function
+
+Styles must be wrapped in `css()`.
+
+```js
+<div style={css({ width: 100, color: props.color })} />
+```
+
+### `css.apply()` function
+
+A function that returns native props, e.g., `const nativeProps = css.apply(...styles)`. On web, this is used to generate DOM `className` and `style` props, whereas on native it can be used to pass flattened/transformed styles and any other other native props to custom native components.
+
+## CSS Compatibility
+
+Existing properties that can be adjusted to align with the CSS spec.
+
+* [x] [`aspectRatio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio). Support string values, i.e., `'16 / 9'`, to align with CSS.
+* [x] [`borderRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). Support percentage values to align with CSS.
+* [x] [`fontVariant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) support space-separated string values to align with CSS.
+* [x] [`fontWeight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) support number values to align with React DOM / CSS.
+* [x] [`objectFit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) is equivalent to `resizeMode` for `<Image>`.
+* [x] [`pointerEvents`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) is equivalent to `pointerEvents` prop.
+* [ ] [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position). Support for `fixed` and `sticky` values.
+* [x] [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform). Support using string values to set transforms.
+* [x] [`verticalAlign`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) is equivalent to `textAlignVertical`.
+* [x] [`userSelect`](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select). Equivalent to using `selectable` prop on `<Text>`.
+
+Existing logical properties that can be adjusted to adopt the CSS standard names. In addition, React Native will need to add native support for subtree-level writing direction controls. Setting the `dir` prop (or `direction` style) to `ltr` or `rtl` on an element should alter the way logical properties are resolved in the subtree.
+
+* [ ] (`direction`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) on web, and we should consider removing it in favor of the `dir` prop.)
+* [x] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
+* [x] `borderEndStartRadius` is equivalent to `borderBottomStartRadius`.
+* [x] `borderStartEndRadius` is equivalent to `borderTopEndRadius`.
+* [x] `borderStartStartRadius` is equivalent to `borderTopStartRadius`.
+* [ ] `borderBlockColor` is equivalent to `borderTopColor` & `borderBottomColor`.
+* [ ] `borderBlockEndColor` is equivalent to `borderBottomColor`.
+* [ ] `borderBlockStartColor` is equivalent to `borderTopColor`.
+* [ ] `borderInlineColor` is equivalent to `borderEndColor` & `borderStartColor`.
+* [ ] `borderInlineEndColor` is equivalent to `borderEndColor`.
+* [ ] `borderInlineStartColor` is equivalent to `borderStartColor`.
+* [ ] `borderBlockStyle` is equivalent to `borderTopStyle` & `borderBottomStyle`.
+* [ ] `borderBlockEndStyle` is equivalent to `borderBottomStyle`.
+* [ ] `borderBlockStartStyle` is equivalent to `borderTopStyle`.
+* [ ] `borderInlineStyle` is equivalent to `borderEndStyle` & `borderStartStyle`.
+* [ ] `borderInlineEndStyle` is equivalent to `borderEndStyle`.
+* [ ] `borderInlineStartStyle` is equivalent to `borderStartStyle`.
+* [ ] `borderBlockWidth` is equivalent to `borderTopWidth` & `borderBottomWidth`.
+* [ ] `borderBlockEndWidth` is equivalent to `borderBottomWidth`.
+* [ ] `borderBlockStartWidth` is equivalent to `borderTopWidth`.
+* [ ] `borderInlineWidth` is equivalent to `borderEndWidth` & `borderStartWidth`.
+* [ ] `borderInlineEndWidth` is equivalent to `borderEndWidth`.
+* [ ] `borderInlineStartWidth` is equivalent to `borderStartWidth`.
+* [x] `marginInlineStart` is equivalent to `marginStart`.
+* [x] `marginInlineEnd` is equivalent to `marginEnd`.
+* [x] `marginBlockStart` is equivalent to `marginTop`.
+* [x] `marginBlockEnd` is equivalent to `marginBottom`.
+* [x] `marginBlock` is equivalent to `marginVertical`.
+* [x] `marginInline` is equivalent to `marginHorizontal`.
+* [x] `paddingInlineStart` is equivalent to `paddingStart`.
+* [x] `paddingInlineEnd` is equivalent to `paddingEnd`.
+* [x] `paddingBlockStart` is equivalent to `paddingTop`.
+* [x] `paddingBlockEnd` is equivalent to `paddingBottom`.
+* [x] `paddingBlock` is equivalent to `paddingVertical`.
+* [x] `paddingInline` is equivalent to `paddingHorizontal`.
+* [x] `inset` is equivalent to `top` & `bottom` & `right` & `left`.
+* [x] `insetBlock` is equivalent to `top` & `bottom`.
+* [x] `insetBlockEnd` is equivalent to `bottom`.
+* [x] `insetBlockStart` is equivalent to `top`.
+* [x] `insetInline` is equivalent to `right` & `left`.
+* [x] `insetInlineEnd` is equivalent to `right` or `left`.
+* [x] `insetInlineStart` is equivalent to `right` or `left`.
+
+## CSS Animations
+
+Support declarative keyframes and animations that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C animation events too. See [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)).
+
+- [ ] [`animationDelay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)
+- [ ] [`animationDirection`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
+- [ ] [`animationDuration`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)
+- [ ] [`animationFillMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)
+- [ ] [`animationIterationCount`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)
+- [ ] [`animationName`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name)
+- [ ] [`animationPlayState`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)
+- [ ] [`animationTimingFunction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
+
+TBD: the relationship between `animationName` (or equivalent) and the API used to define Animation keyframes.
+
+## CSS Colors
+
+Support CSS 4 Colors, possibly by using [Colorjs.io](https://colorjs.io/) or implementing a native equivalent.
+
+## CSS Container Queries
+
+Prepare for [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries).
+
+## CSS Custom Properties
+
+Support CSS custom property syntax `--variable-name`. This could be shimmed in user-space on top of the existing `StyleSheet` API, with a React Context used to provide variables and values to a subtree.
+
+* [`CSS Variables`](https://w3c.github.io/csswg-drafts/css-variables/)
+* [Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+* [`var()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+
+## CSS Filters
+
+Support declarative filters as used by the CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) style.
+
+* [ ] [`blur()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur)
+* [ ] [`brightness()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness)
+* [ ] [`contrast()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast)
+* [ ] [`drop-shadow()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow)
+* [ ] [`grayscale()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale)
+* [ ] [`hue-rotate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate)
+* [ ] [`invert()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert)
+* [ ] [`opacity()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity)
+* [ ] [`saturate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate)
+* [ ] [`sepia()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia)
+
+## CSS Functions
+
+* [ ] [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
+* [ ] [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)
+* [ ] [`max()`](https://developer.mozilla.org/en-US/docs/Web/CSS/max)
+* [ ] [`min()`](https://developer.mozilla.org/en-US/docs/Web/CSS/min)
+* [ ] [`minmax()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax)
+* [ ] [`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/url)
+* [ ] [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+
+## CSS Lengths
+
+Support major units where supported by CSS.
+
+* [ ] [`em`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
+* [ ] [`rem`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
+* [ ] `px` units.
+* [ ] [`v*`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) units.
+* [ ] [`%`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages) units.
+
+## CSS Media Queries
+
+Support CSS Media Queries.
+
+Although Media Queries are not a preferred long-term solution for responsive design, [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) are not yet widely supported by browsers. The dimensional Media Queries could be shimmed in user-space on top of the existing `StyleSheet` API.
+
+Logical operators `not`, `and`, `or`, `only`.
+
+[Media features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features):
+
+- [ ] [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio)
+- [ ] [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)
+- [ ] [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height)
+- [ ] [`inverted-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)
+- [ ] [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation)
+- [ ] [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+- [ ] [`prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)
+- [ ] [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
+- [ ] [`resolution`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution)
+- [ ] [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
+
+Proposed syntax:
+
+```js
+// Either
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    '@media (max-width: 600px)': {
+      position: 'sticky',
+    }
+  }
+});
+
+// Or
+const styles = StyleSheet.create({
+  root: {
+    position: {
+      default: 'absolute',
+      '@media (max-width: 600px)': 'sticky',
+    }
+  }
+});
+```
+
+The benefit of the latter is clearer expectations (and greater constraints) about when properties are overridden. For example, it's not as clear what the value for `position` would be in the following:
+
+```js
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    '@media (max-width: 600px)': {
+      position: 'sticky',
+    }
+  },
+  override: {
+    position: 'relative',
+  }
+});
+
+const style = [ styles.root, styles.override ];
+// {
+//   position: relative,
+//   '@media (max-width: 600px)': {
+//     position: 'sticky',
+//   }
+// }
+```
+
+Whereas in the next example we can set expectations that a property *and any previous conditions* are completed overridden by any declaration that later modifies the property in any way.
+
+```js
+const styles = StyleSheet.create({
+  root: {
+    position: {
+      default: 'absolute',
+      '@media (max-width: 600px)': 'sticky'
+    }
+  },
+  override: {
+    position: {
+      default: 'relative',
+    }
+  }
+});
+
+const style = [ styles.root, styles.override ];
+// {
+//   position: relative
+// }
+```
+
+Consideration is also required to determine what the final value of a property is when Media Query conditions overlap, i.e., which media features and which conditions (e.g., multiple `width` conditions) take priority over others.
+
+## CSS Properties and Values
+
+Miscellaneous CSS properties and values that should be supported on native.
+
+* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients.
+* [ ] [`backgroundOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).
+* [ ] [`backgroundPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
+* [ ] [`backgroundRepeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
+* [ ] [`backgroundSize`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
+* [ ] [`boxSizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
+* [ ] [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles. Resolves issue (#26110)[https://github.com/facebook/react-native/pull/26110] and [multiple other issues](https://github.com/facebook/react-native/search?q=ios+shadow&type=issues).
+* [ ] [`caretColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color).
+* [ ] [`clipPath`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
+* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`.
+* [ ] [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float).
+* [ ] [`justifySelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). Sets the way a box is justified inside its alignment container along the appropriate axis.
+* [ ] ([`lineClamp`](https://www.w3.org/TR/css-overflow-3/#propdef-line-clamp) is equivalent to `numberOfLines` prop on `<Text>` components).
+* [ ] [`objectPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position).
+* [ ] [`overflowBlock`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block).
+* [ ] [`overflowInline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline).
+* [ ] [`overflowX`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x).
+* [ ] [`overflowY`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y).
+* [ ] [`placeContent`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content). Shorthand for setting `alignContent` and `justifyContent`. Value is an enum of `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `safe`, `space-around`, `space-between`, `space-evenly`, `start`, `stretch`, `unsafe`. Note that `space-evenly` should also be supported for `alignContent` and `justifyContent`.
+* [ ] [`placeItems`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items). Shorthand for setting `alignItems` and `justifyItems`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `right`, `start`, `stretch`.
+* [ ] [`placeSelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self). Shorthand for setting `alignSelf` and `justifySelf`. Value is an enum of `auto`, `baseline`, `first baseline`, `last baseline`, `center`, `end`, `flex-start`, `flex-end`, `left`, `normal`, `right`, `start`, `stretch`.
+* [ ] [`rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate).
+* [ ] [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale).
+* [ ] [`scrollSnap*`](https://drafts.csswg.org/css-scroll-snap-1/#overview)
+* [ ] `textShadow`. Add native support for CSS text shadows. Resolves issue (#26110)[https://github.com/facebook/react-native/pull/26110].
+* [ ] [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).
+* [ ] [`transformStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style). Resolves proposal [#425](https://github.com/react-native-community/discussions-and-proposals/issues/425).
+* [ ] [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate).
+* [ ] [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility). Add support for visually hiding elements.
+* [ ] [`whiteSpace`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space).
+
+## CSS Transitions
+
+Support declarative transitions that can be optimized on the native side and avoid the need for `Animated`. Consider dispatching the corresponding W3C transition events too.
+
+- [ ] [`transitionDelay`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
+- [ ] [`transitionDuration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)
+- [ ] [`transitionProperty`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
+- [ ] [`transitionTimingFunction`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)

From c860054336f7877948bd129b0ae4e3204381426f Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Fri, 24 Feb 2023 10:25:05 -0800
Subject: [PATCH 09/11] Add traversal APIs; other minor updates

---
 proposals/0000-reduce-fragmentation.md | 196 ++++++++++++++++---------
 1 file changed, 128 insertions(+), 68 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index bcae5013..c9675473 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -45,7 +45,6 @@ The "complete" API involved is broken down into the following sections.
 * [Props API](#props-api-react-dom-subset). React DOM component props to add to new components, and existing React Native components as part of an incremental strategy.
 * [Styling API](#styles-api-css-subset). CSS APIs to add to the React Native environment.
 
-
 A simplified example of the user-space code we'd aim to support is as follows:
 
 ```js
@@ -231,7 +230,7 @@ Beyond props, there is also the opportunity to reduce fragementation in styling
 
 To encourage React Native library and product developers to proactively migrate to these new APIs, React Native for Web plans to only support these W3C standards-based APIs in future versions. This will allow us to incrementally add APIs to React Native without needing to commit to simultaneously deprecating APIs and migrating existing React Native code. Existing React Native developers must adopt these APIs if they wish to support web.
 
-### Crate a separate package or export for DOM bindings
+### Create a separate package or export for DOM bindings
 
 The next step would be to begin exporting separate React DOM bindings from React Native. This would aim to allow code originally written with React DOM to run on React Native with only minor modifications. There would be no need to use React Native for Web, and the web layer in this scenario would be a lot smaller, limited mostly to implementing the modern W3C events API and integrating a style API that allows for static extraction to optimized CSS.
 
@@ -270,24 +269,25 @@ Aiming for a degree of React DOM compatibility shifts the burden of missing feat
 
 ### Properties
 
-* [ ] [`devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
-* [ ] [`navigator`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)
+* [ ] [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
+* [ ] [`window.navigator`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)
   * [ ] [`clipboard`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard)
   * [ ] [`languages`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages)
   * [ ] [`permissions`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions)
   * [ ] [`vibrate()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate)
-* [`performance`](https://developer.mozilla.org/en-US/docs/Web/API/performance_property)
+* [ ] [`window.performance`](https://developer.mozilla.org/en-US/docs/Web/API/performance_property)
 
 ### Methods
 
-* [ ] `addEventListener()`
-* [ ] `dispatchEvent()`
-* [ ] `removeEventListener()`
+* [ ] `window.addEventListener()`
+* [ ] `window.dispatchEvent()`
+* [ ] [`window.getSelection()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection)
+* [ ] `window.removeEventListener()`
 
 ### APIs
 
-* [ ] [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
-* [ ] [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). Resolves proposal [#350](https://github.com/react-native-community/discussions-and-proposals/issues/350).
+* [ ] [`window.fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
+* [ ] [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). Resolves proposal [#350](https://github.com/react-native-community/discussions-and-proposals/issues/350).
 * [ ] [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API for observing the intersection of target elements. This can also be used as a building block for performance tooling.
 * [ ] [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API for watching changes to the host node tree. This can also be used as a building block for performance tooling.
 * [ ] [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API for responding the changes in the size of elements. Note that this API no longer includes positional coordinates and is optimized for width/height information.
@@ -296,6 +296,8 @@ Aiming for a degree of React DOM compatibility shifts the burden of missing feat
 
 Support the `document` object for common patterns such as listening to visibility changes, and listening to capture or bubble phase events for the entire application (e.g., "outside click" pattern), etc.
 
+The `document` object might not be exposed as a global, and would instead be accessed via `node.getRootNode()` to ensure code accounts for multi-window / multi-root scenarios that are more common for React Native apps than React DOM apps (rendering into sourceless iframes is a similar use case).
+
 ### Events
 
 * [ ] [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event).
@@ -303,12 +305,13 @@ Support the `document` object for common patterns such as listening to visibilit
 
 ### Properties
 
-- [ ] [`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
-- [ ] [`visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
+- [ ] [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement).
+- [ ] [`document.defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView). Returns the `window` object associated with a `document`, or `null` if none is available.
+- [ ] [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
 
 ### Methods
 
-- [ ] [`getElementFromPoint(x,y)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint). Resolves proposal [#501](https://github.com/react-native-community/discussions-and-proposals/issues/501).
+- [ ] [`document.getElementFromPoint(x,y)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint). Resolves proposal [#501](https://github.com/react-native-community/discussions-and-proposals/issues/501).
 
 -----
 
@@ -338,50 +341,87 @@ The DOM Node interface is an abstract base class upon which many other DOM API o
 
 In some cases, a particular feature of the base Node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances.
 
-### Methods
+### Static properties
+
+[Node type constants](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#value)
+
+- [ ] `Node.ELEMENT_NODE` (1)
+- [ ] `Node.TEXT_NODE` (3)
+- [ ] `Node.DOCUMENT_NODE` (9)
+
+[Document position constants](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition#value)
+
+- [ ] `Node.DOCUMENT_POSITION_DISCONNECTED` (1)
+- [ ] `Node.DOCUMENT_POSITION_PRECEDING` (2)
+- [ ] `Node.DOCUMENT_POSITION_FOLLOWING` (4)
+- [ ] `Node.DOCUMENT_POSITION_CONTAINS` (8)
+- [ ] `Node.DOCUMENT_POSITION_CONTAINED_BY` (16)
+
+### Instance properties
+
+- [ ] [`node.childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes). Not a live collection.
+- [ ] [`node.firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+- [ ] [`node.isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+- [ ] [`node.lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+- [ ] [`node.nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+- [ ] [`node.nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+- [ ] [`node.nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+- [ ] [`node.nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) (always null)
+- [ ] [`node.parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+- [ ] [`node.parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+- [ ] [`node.previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+- [ ] [`node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+
+### Instances methods
 
 Node inherits methods from its parent, EventTarget.
 
-- [ ] [`Node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-- [ ] [`Node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
-- [ ] [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
+- [ ] [`node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+- [ ] [`node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
+- [ ] [`node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
+- [ ] [`node.hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes).
 
 ## Element
 
 Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
 
-### Properties
+### Instance properties
 
 Element inherits properties from its parent interface, Node, and by extension that interface's parent, EventTarget.
 
-- [ ] [`Element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
-- [ ] [`Element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
-- [ ] [`Element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
-- [ ] [`Element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
-- [ ] [`Element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
-- [ ] [`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
-- [ ] [`Element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
-- [ ] [`Element.scrollLeftMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax) [Read only]. Returns a number representing the maximum left scroll offset possible for the element.
-- [ ] [`Element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
-- [ ] [`Element.scrollTopMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax) [Read only]. Returns a number representing the maximum top scroll offset possible for the element.
-- [ ] [`Element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
-
-### Methods
+- [ ] [`element.childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount).
+- [ ] [`element.children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children). Not a live collection.
+- [ ] [`element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
+- [ ] [`element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
+- [ ] [`element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
+- [ ] [`element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
+- [ ] [`element.firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild).
+- [ ] [`element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
+- [ ] [`element.lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild).
+- [ ] [`element.nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling).
+- [ ] [`element.previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling).
+- [ ] [`element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
+- [ ] [`element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
+- [ ] [`element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
+- [ ] [`element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
+- [ ] [`element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) (alias for nodeName).
+
+### Instance methods
 
 Element inherits methods from its parents Node, and its own parent, EventTarget.
 
-- [ ] [`Element.computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap). Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
-- [ ] [`Element.getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute). Returns the value of a specified attribute on the element.
-- [ ] [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
-- [ ] [`Element.getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). Returns a collection of `DOMRect` objects that indicate the bounding rectangles for each CSS border box in a client.
-- [ ] [`Element.hasAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute). Returns a Boolean value indicating whether the specified element has the specified attribute or not.
-- [ ] [`Element.hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture). Checks whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
-- [ ] [`Element.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll). Scrolls to a particular set of coordinates inside a given element.
-- [ ] [`Element.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy). Scrolls an element by the given amount.
-- [ ] [`Element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Scrolls the page until the element gets into the view.
-- [ ] [`Element.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo). Scrolls to a particular set of coordinates inside a given element.
-- [ ] [`Element.setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture). Used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released.
-- [ ] [`Element.releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture). Releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.
+- [ ] [`element.computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap). Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
+- [ ] [`element.getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute). Returns the value of a specified attribute on the element.
+- [ ] [`element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
+- [ ] [`element.getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). Returns a collection of `DOMRect` objects that indicate the bounding rectangles for each CSS border box in a client.
+- [ ] [`element.hasAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute). Returns a Boolean value indicating whether the specified element has the specified attribute or not.
+- [ ] [`element.hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture). Checks whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+- [ ] [`element.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll). Scrolls to a particular set of coordinates inside a given element. (Note that this would be async in React Native.)
+- [ ] [`element.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy). Scrolls an element by the given amount. (Note that this would be async in React Native.)
+- [ ] [`element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Scrolls the page until the element gets into the view. (Note that this would be async in React Native.)
+- [ ] [`element.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo). Alias for `scroll()`.
+- [ ] [`element.setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture). Used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released.
+- [ ] [`element.releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture). Releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.
 
 ### Events
 
@@ -727,9 +767,9 @@ Additional events for `<img>`.
 - [ ] [`on-error`](https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event)
 - [ ] `on-load`
 
-## `<input>` and `<textarea>` props
+## `<input>` props
 
-Additional props for `<input>` and `<textarea>`.
+Additional props for `<input>`.
 
 - [x] [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
 - [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
@@ -749,7 +789,33 @@ Additional props for `<input>` and `<textarea>`.
 - [ ] [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder).
 - [x] [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly) is the same as inverse `editable`.
 - [ ] [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required).
-- [x] [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) is the same as `numberOfLines` (`<textarea>` only).
+- [ ] [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck).
+- [ ] [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type).
+- [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value).
+
+## `<textarea>` props
+
+Additional props for `<textarea>`.
+
+- [x] [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) is the same as mapped values for existing `autoComplete` (Android) and `textContentType` (iOS).
+- [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+- [x] [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) is the same as mapped values for `returnKeyType`.
+- [x] [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)  is the same as mapped values for `keyboardType`.
+  - [x] `inputMode === 'decimal'` is the same as `keyboardType = 'decimal-pad'`.
+  - [x] `inputMode === 'email'` is the same as `keyboardType = 'email-address'`.
+  - [x] `inputMode === 'none'` is the same as `showSoftInputOnFocus = false`.
+  - [x] `inputMode === 'numeric'` is the same as `keyboardType = 'numeric'`.
+  - [x] `inputMode === 'search'` is the same as `keyboardType = 'search'`.
+  - [x] `inputMode === 'tel'` is the same as `keyboardType = 'phone-pad'`.
+  - [x] `inputMode === 'url'` is the same as `keyboardType = 'url'`.
+- [ ] [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max).
+- [x] [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength).
+- [ ] [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min).
+- [ ] [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength).
+- [ ] [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder).
+- [x] [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly) is the same as inverse `editable`.
+- [ ] [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required).
+- [x] [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) is the same as `numberOfLines`.
 - [ ] [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck).
 - [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value).
 
@@ -933,22 +999,18 @@ Proposed syntax:
 
 ```js
 // Either
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    '@media (max-width: 600px)': {
-      position: 'sticky',
-    }
+css({
+  position: 'absolute',
+  '@media (max-width: 600px)': {
+    position: 'sticky',
   }
 });
 
 // Or
-const styles = StyleSheet.create({
-  root: {
-    position: {
-      default: 'absolute',
-      '@media (max-width: 600px)': 'sticky',
-    }
+css({
+  position: {
+    default: 'absolute',
+    '@media (max-width: 600px)': 'sticky',
   }
 });
 ```
@@ -956,19 +1018,18 @@ const styles = StyleSheet.create({
 The benefit of the latter is clearer expectations (and greater constraints) about when properties are overridden. For example, it's not as clear what the value for `position` would be in the following:
 
 ```js
-const styles = StyleSheet.create({
-  root: {
+css(
+  {
     position: 'absolute',
     '@media (max-width: 600px)': {
       position: 'sticky',
     }
   },
-  override: {
+  {
     position: 'relative',
   }
-});
+);
 
-const style = [ styles.root, styles.override ];
 // {
 //   position: relative,
 //   '@media (max-width: 600px)': {
@@ -980,21 +1041,20 @@ const style = [ styles.root, styles.override ];
 Whereas in the next example we can set expectations that a property *and any previous conditions* are completed overridden by any declaration that later modifies the property in any way.
 
 ```js
-const styles = StyleSheet.create({
-  root: {
+css(
+  {
     position: {
       default: 'absolute',
       '@media (max-width: 600px)': 'sticky'
     }
   },
-  override: {
+  {
     position: {
       default: 'relative',
     }
   }
-});
+);
 
-const style = [ styles.root, styles.override ];
 // {
 //   position: relative
 // }

From 43e14bbb40ed481afa1ab69c2709253c4a98de29 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 14 Sep 2023 14:00:39 -0700
Subject: [PATCH 10/11] Update to account for traversal API completion

---
 proposals/0000-reduce-fragmentation.md | 118 ++++++++++++++-----------
 1 file changed, 65 insertions(+), 53 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index c9675473..dbe8938a 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -345,41 +345,41 @@ In some cases, a particular feature of the base Node interface may not apply to
 
 [Node type constants](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#value)
 
-- [ ] `Node.ELEMENT_NODE` (1)
-- [ ] `Node.TEXT_NODE` (3)
-- [ ] `Node.DOCUMENT_NODE` (9)
+- [x] `Node.ELEMENT_NODE` (1)
+- [x] `Node.TEXT_NODE` (3)
+- [x] `Node.DOCUMENT_NODE` (9)
 
 [Document position constants](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition#value)
 
-- [ ] `Node.DOCUMENT_POSITION_DISCONNECTED` (1)
-- [ ] `Node.DOCUMENT_POSITION_PRECEDING` (2)
-- [ ] `Node.DOCUMENT_POSITION_FOLLOWING` (4)
-- [ ] `Node.DOCUMENT_POSITION_CONTAINS` (8)
-- [ ] `Node.DOCUMENT_POSITION_CONTAINED_BY` (16)
+- [x] `Node.DOCUMENT_POSITION_DISCONNECTED` (1)
+- [x] `Node.DOCUMENT_POSITION_PRECEDING` (2)
+- [x] `Node.DOCUMENT_POSITION_FOLLOWING` (4)
+- [x] `Node.DOCUMENT_POSITION_CONTAINS` (8)
+- [x] `Node.DOCUMENT_POSITION_CONTAINED_BY` (16)
 
 ### Instance properties
 
-- [ ] [`node.childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes). Not a live collection.
-- [ ] [`node.firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-- [ ] [`node.isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-- [ ] [`node.lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-- [ ] [`node.nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-- [ ] [`node.nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-- [ ] [`node.nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-- [ ] [`node.nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) (always null)
-- [ ] [`node.parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-- [ ] [`node.parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-- [ ] [`node.previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-- [ ] [`node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- [x] [`node.childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes). Not a live collection.
+- [x] [`node.firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+- [x] [`node.isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+- [x] [`node.lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+- [x] [`node.nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+- [x] [`node.nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+- [x] [`node.nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+- [x] [`node.nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) (always null)
+- [x] [`node.parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+- [x] [`node.parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+- [x] [`node.previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+- [x] [`node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
 
 ### Instances methods
 
 Node inherits methods from its parent, EventTarget.
 
-- [ ] [`node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-- [ ] [`node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
-- [ ] [`node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
-- [ ] [`node.hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes).
+- [x] [`node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+- [x] [`node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
+- [-] [`node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
+- [x] [`node.hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes).
 
 ## Element
 
@@ -389,22 +389,22 @@ Element is the most general base class from which all element objects (i.e. obje
 
 Element inherits properties from its parent interface, Node, and by extension that interface's parent, EventTarget.
 
-- [ ] [`element.childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount).
-- [ ] [`element.children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children). Not a live collection.
-- [ ] [`element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
-- [ ] [`element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
-- [ ] [`element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
-- [ ] [`element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
-- [ ] [`element.firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild).
-- [ ] [`element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
-- [ ] [`element.lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild).
-- [ ] [`element.nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling).
-- [ ] [`element.previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling).
-- [ ] [`element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
-- [ ] [`element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
-- [ ] [`element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
-- [ ] [`element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
-- [ ] [`element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) (alias for nodeName).
+- [x] [`element.childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount).
+- [x] [`element.children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children). Not a live collection.
+- [x] [`element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) [Read only]. Returns a number representing the inner height of the element.
+- [x] [`element.clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) [Read only]. Returns a number representing the width of the left border of the element.
+- [x] [`element.clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) [Read only]. Returns a number representing the width of the top border of the element.
+- [x] [`element.clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) [Read only]. Returns a number representing the inner width of the element.
+- [x] [`element.firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild).
+- [x] [`element.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) [Read only]. Is a DOMString representing the id of the element.
+- [x] [`element.lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild).
+- [x] [`element.nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling).
+- [x] [`element.previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling).
+- [x] [`element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [Read only]. Returns a number representing the scroll view height of an element.
+- [x] [`element.scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). Is a number representing the left scroll offset of the element.
+- [x] [`element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). A number representing number of pixels the top of the element is scrolled vertically.
+- [x] [`element.scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) [Read only]. Returns a number representing the scroll view width of the element.
+- [x] [`element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) (alias for nodeName).
 
 ### Instance methods
 
@@ -412,7 +412,7 @@ Element inherits methods from its parents Node, and its own parent, EventTarget.
 
 - [ ] [`element.computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap). Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
 - [ ] [`element.getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute). Returns the value of a specified attribute on the element.
-- [ ] [`element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
+- [x] [`element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). Returns the size of an element and its position relative to the viewport.
 - [ ] [`element.getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). Returns a collection of `DOMRect` objects that indicate the bounding rectangles for each CSS border box in a client.
 - [ ] [`element.hasAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute). Returns a Boolean value indicating whether the specified element has the specified attribute or not.
 - [ ] [`element.hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture). Checks whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
@@ -476,11 +476,11 @@ The HTMLElement interface represents any HTML element. Some elements directly im
 Inherits properties from its parent, Element, and implements those from DocumentAndElementEventHandlers, GlobalEventHandlers, and TouchEventHandlers.
 
 - [ ] [`HTMLElement.hidden`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden) [Read only]. A boolean value indicating if the element is hidden or not.
-- [ ] [`HTMLElement.offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) [Read only]. Returns a double containing the height of an element, relative to the layout.
-- [ ] [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) [Read only]. Returns a double, the distance from this element's left border to its offsetParent's left border.
-- [ ] [`HTMLElement.offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) [Read only]. Returns a Element that is the element from which all offset calculations are currently computed.
-- [ ] [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) [Read only]. Returns a double, the distance from this element's top border to its offsetParent's top border.
-- [ ] [`HTMLElement.offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth) [Read only]. Returns a double containing the width of an element, relative to the layout.
+- [x] [`HTMLElement.offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) [Read only]. Returns a double containing the height of an element, relative to the layout.
+- [x] [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) [Read only]. Returns a double, the distance from this element's left border to its offsetParent's left border.
+- [x] [`HTMLElement.offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) [Read only]. Returns a Element that is the element from which all offset calculations are currently computed.
+- [x] [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) [Read only]. Returns a double, the distance from this element's top border to its offsetParent's top border.
+- [x] [`HTMLElement.offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth) [Read only]. Returns a double containing the width of an element, relative to the layout.
 
 ### Methods
 
@@ -834,19 +834,25 @@ Additional events for `<input>` and `<textarea>`.
 
 # Styles API (CSS subset)
 
-Significantly expanded styling capabilities to cover more of the features that are heavily relied upon by web engineers. Styles are used with the `css()` function and are passed to the `style` prop on elements.
+Significantly expanded styling capabilities to cover more of the features that are heavily relied upon by web engineers. Styles are used with the `css.create()` function and are passed to the `style` prop on elements.
 
 ## `css()` function
 
 Styles must be wrapped in `css()`.
 
 ```js
-<div style={css({ width: 100, color: props.color })} />
-```
-
-### `css.apply()` function
+const styles = css.create({
+  foo: {
+    width: 100
+  },
+  bar: (color) => ({
+    color
+  })
+});
 
-A function that returns native props, e.g., `const nativeProps = css.apply(...styles)`. On web, this is used to generate DOM `className` and `style` props, whereas on native it can be used to pass flattened/transformed styles and any other other native props to custom native components.
+<div style={styles.foo} />
+<div style={styles.bar(props.color)} />
+```
 
 ## CSS Compatibility
 
@@ -865,7 +871,7 @@ Existing properties that can be adjusted to align with the CSS spec.
 
 Existing logical properties that can be adjusted to adopt the CSS standard names. In addition, React Native will need to add native support for subtree-level writing direction controls. Setting the `dir` prop (or `direction` style) to `ltr` or `rtl` on an element should alter the way logical properties are resolved in the subtree.
 
-* [ ] (`direction`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) on web, and we should consider removing it in favor of the `dir` prop.)
+* [ ] (`direction`. But it is [not recommended](https://w3c.github.io/csswg-drafts/css-writing-modes/#propdef-direction) for most use cases on web.)
 * [x] `borderEndEndRadius` is equivalent to `borderBottomEndRadius`.
 * [x] `borderEndStartRadius` is equivalent to `borderBottomStartRadius`.
 * [x] `borderStartEndRadius` is equivalent to `borderTopEndRadius`.
@@ -907,6 +913,12 @@ Existing logical properties that can be adjusted to adopt the CSS standard names
 * [x] `insetInline` is equivalent to `right` & `left`.
 * [x] `insetInlineEnd` is equivalent to `right` or `left`.
 * [x] `insetInlineStart` is equivalent to `right` or `left`.
+* [ ] `blockSize` is equivalent to `height`.
+* [ ] `minBlockSize` is equivalent to `minHeight`.
+* [ ] `maxBlockSize` is equivalent to `maxHeight`.
+* [ ] `inlineSize` is equivalent to `width`.
+* [ ] `minInlineSize` is equivalent to `minWidth`.
+* [ ] `maxInlineSize` is equivalent to `maxWidtht`.
 
 ## CSS Animations
 

From 910776e1d9b77006edb9c4cc43b6ad8750a37ec7 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 14 Sep 2023 14:12:38 -0700
Subject: [PATCH 11/11] Add <dialog> and display:grid

---
 proposals/0000-reduce-fragmentation.md | 54 +++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/proposals/0000-reduce-fragmentation.md b/proposals/0000-reduce-fragmentation.md
index dbe8938a..40609598 100644
--- a/proposals/0000-reduce-fragmentation.md
+++ b/proposals/0000-reduce-fragmentation.md
@@ -378,7 +378,7 @@ Node inherits methods from its parent, EventTarget.
 
 - [x] [`node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
 - [x] [`node.contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains). Returns true or false value indicating whether or not a node is a descendant of the calling node.
-- [-] [`node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
+- [ ] [`node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). Returns the context object's root which optionally includes the shadow root if it is available..
 - [x] [`node.hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes).
 
 ## Element
@@ -498,6 +498,30 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 - [ ] [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `on-change` property.
 - [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `on-input` property.
 
+## HTMLDialogElement
+
+The HTMLDialogElement interface represents an HTML `<dialog>` element, providing the properties and methods used to manipulate image elements.
+
+### Properties
+
+Inherits properties from its parent, HTMLElement.
+
+- [ ] [`HTMLDialogElement.open`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open). A boolean value representing the state of the open HTML attribute. true means it is set, and therefore the dialog is shown. false means it not set, and therefore the dialog is not shown.
+- [ ] [`HTMLDialogElement.returnValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue). A string representing the returnValue of the dialog.
+
+### Methods
+
+Inherits properties from its parent, HTMLElement.
+
+- [ ] [`HTMLDialogElement.close()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close). Closes the dialog. An optional string may be passed as an argument, updating the returnValue of the dialog.
+- [ ] [`HTMLDialogElement.show()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show).Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.
+- [ ] [`HTMLDialogElement.showModal()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal). Displays the dialog as a modal, over the top of any other dialogs that might be present. Everything outside the dialog are inert with interactions outside the dialog being blocked.
+
+### Events
+
+- [ ] `cancel`. Also available via the `on-cancel` prop.
+- [ ] `close`. Also available via the `on-close` prop.
+
 ## HTMLImageElement
 
 The HTMLImageElement interface represents an HTML `<img>` element, providing the properties and methods used to manipulate image elements.
@@ -526,7 +550,7 @@ Properties that apply only to visible elements containing text or numbers
 
 - [ ] [`disabled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled).
 - [ ] [`selectionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionend). unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
-- [ ] [`selectionStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionstart). unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. (Resolves issue (#35616)[https://github.com/facebook/react-native/pull/35616].)
+- [ ] [`selectionStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectionstart). unsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. (Resolves issue [#35616](https://github.com/facebook/react-native/pull/35616).)
 - [ ] [`selectionDirection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#selectiondirection). string: Returns / Sets the direction in which selection occurred. Possible values are: forward (the selection was performed in the start-to-end direction of the current locale), backward (the opposite direction) or none (the direction is unknown).
 - [ ] [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value). string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
 
@@ -582,6 +606,7 @@ Content sectioning elements allow you to organize the document content into logi
 
 * [ ] [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) is equivalent to `View` with `display:block` layout and `role="article"`.
 * [ ] [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside).
+* [ ] [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
 * [ ] [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is equivalent to `View` with `display:block` layout.
 * [ ] [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer).
 * [ ] [`h1-6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
@@ -738,12 +763,20 @@ Resolves proposal [#492](https://github.com/react-native-community/discussions-a
 
 ## `<a>` props
 
+Additional props for `<a>`.
+
 - [ ] [`download`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download).
 - [ ] [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href). Clicking will always attempt to open the URL in a browser, mail client, etc. Use of `e.preventDefault()` in an event handler will disable this behavior and allow custom routing logic to handle the interaction.
 - [ ] [`referredPolicy`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy).
 - [ ] [`rel`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel).
 - [ ] [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target).
 
+## `<dailog>` props
+
+Additional props for `<dialog>`.
+
+- [ ] [`open`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#open).
+
 ## `<img>` props
 
 Additional props for `<img>`.
@@ -1011,7 +1044,7 @@ Proposed syntax:
 
 ```js
 // Either
-css({
+css.create({
   position: 'absolute',
   '@media (max-width: 600px)': {
     position: 'sticky',
@@ -1019,7 +1052,7 @@ css({
 });
 
 // Or
-css({
+css.create({
   position: {
     default: 'absolute',
     '@media (max-width: 600px)': 'sticky',
@@ -1030,7 +1063,7 @@ css({
 The benefit of the latter is clearer expectations (and greater constraints) about when properties are overridden. For example, it's not as clear what the value for `position` would be in the following:
 
 ```js
-css(
+css.create(
   {
     position: 'absolute',
     '@media (max-width: 600px)': {
@@ -1053,7 +1086,7 @@ css(
 Whereas in the next example we can set expectations that a property *and any previous conditions* are completed overridden by any declaration that later modifies the property in any way.
 
 ```js
-css(
+css.create(
   {
     position: {
       default: 'absolute',
@@ -1078,16 +1111,16 @@ Consideration is also required to determine what the final value of a property i
 
 Miscellaneous CSS properties and values that should be supported on native.
 
-* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients.
+* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients, e.g., `linear-gradient()`.
 * [ ] [`backgroundOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).
 * [ ] [`backgroundPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
 * [ ] [`backgroundRepeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
 * [ ] [`backgroundSize`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
 * [ ] [`boxSizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
-* [ ] [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles. Resolves issue (#26110)[https://github.com/facebook/react-native/pull/26110] and [multiple other issues](https://github.com/facebook/react-native/search?q=ios+shadow&type=issues).
+* [ ] [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles. Resolves issue [#26110](https://github.com/facebook/react-native/pull/26110) and [multiple other issues](https://github.com/facebook/react-native/search?q=ios+shadow&type=issues).
 * [ ] [`caretColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color).
 * [ ] [`clipPath`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
-* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`.
+* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`, and `grid`.
 * [ ] [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float).
 * [ ] [`justifySelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). Sets the way a box is justified inside its alignment container along the appropriate axis.
 * [ ] ([`lineClamp`](https://www.w3.org/TR/css-overflow-3/#propdef-line-clamp) is equivalent to `numberOfLines` prop on `<Text>` components).
@@ -1102,8 +1135,9 @@ Miscellaneous CSS properties and values that should be supported on native.
 * [ ] [`rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate).
 * [ ] [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale).
 * [ ] [`scrollSnap*`](https://drafts.csswg.org/css-scroll-snap-1/#overview)
-* [ ] `textShadow`. Add native support for CSS text shadows. Resolves issue (#26110)[https://github.com/facebook/react-native/pull/26110].
+* [ ] `textShadow`. Add native support for CSS text shadows. Resolves issue [#26110](https://github.com/facebook/react-native/pull/26110).
 * [ ] [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).
+* [x] [`transformOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
 * [ ] [`transformStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style). Resolves proposal [#425](https://github.com/react-native-community/discussions-and-proposals/issues/425).
 * [ ] [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate).
 * [ ] [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility). Add support for visually hiding elements.