Attribute on not passed to the DOM

[dpuscher]

Environment

System:

• OS: macOS 10.14.5
• CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
• Memory: 231.25 MB / 16.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
• Yarn: 1.16.0 - ~/.yarn/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.10.6 => 1.10.6
• styled-components: ^4.2.0 => 4.3.2

Reproduction

Define any styled component and add an on attribute to it:
https://codesandbox.io/s/styled-components-7qw97

Expected Behavior

The on attribute is passed to the dom element.

Actual Behavior

The on attribute is not showing up on the dom element.

[quantizor]

It’s not a known HTML attribute https://www.styled-components.com/docs/basics#passed-props

…

On Wed, Jul 24, 2019 at 9:33 AM Daniel Puscher ***@***.***> wrote: Environment System: - OS: macOS 10.14.5 - CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz - Memory: 231.25 MB / 16.00 GB - Shell: 5.3 - /bin/zsh Binaries: - Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node - Yarn: 1.16.0 - ~/.yarn/bin/yarn - npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm npmPackages: - babel-plugin-styled-components: ^1.10.6 => 1.10.6 - styled-components: ^4.2.0 => 4.3.2 Reproduction Define any styled component and add an on attribute to it: https://codesandbox.io/s/styled-components-7qw97 Steps to reproduce Create a StyledComponent and add a on attribute. Expected Behavior The on attribute is passed to the dom element. Actual Behavior The on attribute is not showing up on the dom element. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2689?email_source=notifications&email_token=AAELFVQMG3Z4ZRJJJ77Y5D3QBBK3TA5CNFSM4IGQDZ2KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HBGQYPQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAELFVSV4CSQE5RSAIBZA73QBBK3TANCNFSM4IGQDZ2A> .

[dpuscher]

Yes, it is not a valid HTML attribute, but I think there should be a way to add it to the DOM anyway.
Maybe by defining a list of custom "valid" attributes?

[quantizor]

@dpuscher working on getting it into the whitelist since it'll probably come up often as part of amp

[quantizor]

Fixed in the subdependency: https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fis-prop-valid%400.8.4

Just need to update with your package manager

[dpuscher]

Thanks a lot @probablyup , this solves some annoying workarounds in our code base. 👍

[craigsketchley]

I had a warning pop up for a bunch of switch/button components in a React app after updating to 4.4.1:

Warning: Received `true` for a non-boolean attribute `on`.

If you want to write it to the DOM, pass a string instead: on="true" or on={value.toString()}.

I could be wrong but I feel like on is probably a common prop name used in components? Can't help but think there should be a way in styled-components to whitelist the props you want to pass through as non-standard attributes to the DOM.

[quantizor]

That warning is from React, not us. The “on” attribute is now being passed through if given since it’s used in AMP.

…

On Tue, Nov 5, 2019 at 1:17 AM Craig Sketchley ***@***.***> wrote: I had a warning pop up for a bunch of switch/button components in a React app after updating to 4.4.1: Warning: Received `true` for a non-boolean attribute `on`. If you want to write it to the DOM, pass a string instead: on="true" or on={value.toString()}. I could be wrong but I feel like on is probably a common prop name used in components? Can't help but think there should be a way in styled-components to whitelist the props you want to pass through as non-standard attributes to the DOM. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2689?email_source=notifications&email_token=AAELFVUC2JXITZYZSED73RLQSEFWTA5CNFSM4IGQDZ2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDBW5HI#issuecomment-549678749>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELFVVVZ3QYTDQZIZN5RUTQSEFWTANCNFSM4IGQDZ2A> .

[craigsketchley]

Yeah, I was trying to highlight the impact of whitelisting arbitrary non-standard attributes to pass through to the DOM.

It'd be great if you could configure the props you want to pass through as attributes to the DOM. That way an AMP user could whitelist on and it wouldn't negatively affect others.