Ways to improve the process for adding and removing attributes.

[AnnMarieW]

The purpose of this issue is to open a discussion about better ways of adding and removing attributes for html components.

Currently, to be added as a prop in Dash, an attribute must be in both the MDN HTML Attribute Reference page and the whitelist of valid attributes in React.

Here are some downsides to this method:

• When attributes are dropped from the MDN HTML Attribute Reference page, they are automatically removed from Dash. This occurs during the build process and happens without any warning or notice to users.

• New attributes in the MDN Reference that are not on the React whitelist are excluded from being added as props in Dash. The React whitelist is no longer maintained as of React 16 (late 2017) so it's now out of date. There are currently 21 attributes on the MDN Reference page, that are excluded as Dash props based on the whitelist. There are also 15 attributes on the whitelist that are no longer in the MDN Reference.

• It is not possible to use deprecated or experimental attributes in Dash unless they are valid props in the Dash component

• New attributes are reviewed for addition to Dash periodically or when requested by creating a Github issue. This can lead to lengthy delays in adding attributes.

Potential improvements:

• As of React 16 any standard or custom DOM attribute is fully supported. I'd like to suggest adding a new prop to all dash html components that will make it possible to add attributes to the DOM. This will enable developers to test experimental props or use deprecated or custom props if necessary. It also removes the Plotly team from having to be attribute "gatekeepers" .

attrs : PropTypes.object The attrs prop provides a way to include deprecated, experimental and custom attributes. For example attrs={'translate': 'no'}. Experimental or deprecated props should be avoided as they may not work in all browsers and may be removed at any time from those that do support it. Note that invalid props will be ignored in the DOM and will fail silently. Values of attributes included in attrs will override the values of props with the same name. For example if there is both allow="fullscreen" and attrs={"allow": "payment"}, then allow="payment" will be the attribute in the DOM

• The white list could be updated to include only those attributes that are supported by most browsers. This would become the core list of html attributes in Dash components. People who wish to use excluded props that are deprecated, experimental, or custom can do so by using the new attrs prop. This will keep the list of valid Dash props shorter and more robust.
  The whitelist would continue to provide the of mapping html attribute to the preferred name used in React which should be camelCased and handling special cases such as changing "class" to "className" for React.

• As part of the build process, experimental attributes that are in the MDN Reference, but are excluded based on the whitelist could be listed for review. This will make it easier to routinely review these excluded props to see if they have transitioned from being experimental to being widely supported attributes that can be added to the whitelist and become standard Dash props.

These are few thoughts to get the discussion started. I look forward to hearing critiques, comments and suggestions for improvements.