-
Notifications
You must be signed in to change notification settings - Fork 46.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request: Support server-side rendering of non-standard DOM attribute names (eg. AMP's [prop]="value") #10064
Comments
Thanks for the request @cole-sanderson! Once #7311 is merged this should be possible, with a caveat. The error you're getting: - Parsing error: Unexpected token [ (Fatal) Is because What that means is that you'll just need to use the regular function call syntax for elements that require these AMP attributes. React.createElement('amp-carousel', {
layout: layout,
height: height,
width: width,
'[slide]': slide
} After #7311 is merged the server renderer will not blacklist the Keep in mind this is only for server-side rendering. |
The solution outlined above should now work with React 16. |
Awesome, thank you @aweary! 😀 |
@aweary according to https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail there isn't support for custom DOM elements (amp-carousel) with custom attributes (slide). I've tried the |
hey @kschmidtdev, you are correct. The server renderer still restricts attributes using I'll re-open this. I'm not sure what the solution here would be; it's unfortunate that AMP uses non-standard attribute names. If server rendering AMP components is a common use case then we could potentially fork @gaearon what do you think? |
Would really appreciate a solution for this. Doing server-side AMP rendering as well using react. Will never dehydrate on client. |
Just to add to the confusion, you can still add attributes with square brackets to non-custom components: Example:
This throws a warning only for the |
I've opened #12568 to add the ability to, at the very least, server-render non-standard components with non-standard attributes (like AMP). |
For amp-bind there is now an XML-compatible syntax, so you can do |
Great! In that case I don't think it's worth the effort to support the XML-incompatible syntax. |
Do you want to request a feature or report a bug?
Request a feature
I am working on project to build AMP page with React Server Side Rendering. I am having an issue to add custom attribute to built-in AMP element. In order to be able to use amp-bind we need to be able to output “bindings”, which are special attributes of the form
[attribute]
, eg.[slide]="selectedSlide"
.Here is AMP carousel example that work with amp-bind.
What is the current behavior?
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
For more information, you can read all the discussion in this PR.
The text was updated successfully, but these errors were encountered: