<p dir="auto">This could be considered a bug or a feature request. I say this because I know that React is checking for <a href="https://www.w3.org/TR/xml/#NT-NameStartChar" rel="nofollow">W3C valid attribute property names</a>, but the check is run inconsistently between normal components and custom components which makes its behavior confusing. That means this could be feature to be more explicit about its behavior.</p>
<p dir="auto">For my particular use case, this only needs to be improved upon in <code class="notranslate">react-dom/server</code>. I am trying to render custom properties like those belonging to <a href="https://github.com/ampproject/amphtml"><code class="notranslate">amphtml</code></a>, particularly the <a href="https://www.ampproject.org/docs/reference/components/amp-bind" rel="nofollow"><code class="notranslate">amp-bind</code></a> API which requires <code class="notranslate">[</code> and <code class="notranslate">]</code> in property names. I think that the <a href="https://github.com/facebook/react/blob/dadafd6bd802082b990e447032cb82574bcdc118/packages/react-dom/src/server/DOMMarkupOperations.js#L79-L81">check for valid attribute property names</a> should only throw warnings, or it should have an option to prevent the removal of custom properties.</p>
<p dir="auto">Example:</p>
<ul dir="auto">
<li>
<p dir="auto">JS</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const customProps = {
  &quot;[custom-property]&quot;: &quot;Hello, world!&quot;
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">customProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-s">"[custom-property]"</span>: <span class="pl-s">"Hello, world!"</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
</li>
<li>
<p dir="auto">JSX</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;div {...customProps}&gt;Test&lt;/div&gt;
  &lt;custom-component {...customProps}&gt;Test&lt;/custom-component&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-kos">{</span>...<span class="pl-s1">customProps</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Test<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">custom-component</span> <span class="pl-kos">{</span>...<span class="pl-s1">customProps</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Test<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">custom-component</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
</li>
<li>
<p dir="auto">Resulting HTML</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div data-reactroot=&quot;&quot;&gt;
  &lt;div [custom-property]=&quot;Hello, world!&quot;&gt;Test&lt;/div&gt;
  &lt;custom-component&gt;Test&lt;/custom-component&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">data-reactroot</span>=""<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[custom-property]</span>="<span class="pl-s">Hello, world!</span>"<span class="pl-kos">&gt;</span>Test<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">custom-component</span><span class="pl-kos">&gt;</span>Test<span class="pl-kos">&lt;/</span><span class="pl-ent">custom-component</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
</li>
</ul>
<p dir="auto">This throws a warning only for the <code class="notranslate">&lt;custom-component /&gt;</code>.</p>
<p dir="auto">Try it out in CodeSandbox: <a href="https://codesandbox.io/s/vjj64jv2z0" rel="nofollow">https://codesandbox.io/s/vjj64jv2z0</a></p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Request a feature</p>
<p dir="auto">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 <a href="https://www.ampproject.org/docs/reference/components/amp-bind#bindings" rel="nofollow">amp-bind</a> we need to be able to output “bindings”, which are special attributes of the form <code class="notranslate">[attribute]</code>, eg. <code class="notranslate">[slide]="selectedSlide"</code>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;amp-carousel 
    layout={layout}
    height={height}
    width={width}
    [slide]={slide}
&gt;
        ...
&lt;/amp-carousel&gt;"><pre class="notranslate"><code class="notranslate">&lt;amp-carousel 
    layout={layout}
    height={height}
    width={width}
    [slide]={slide}
&gt;
        ...
&lt;/amp-carousel&gt;
</code></pre></div>
<p dir="auto">Here is AMP carousel example that work with <a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind" rel="nofollow">amp-bind</a>.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<ul dir="auto">
<li>Parsing error: Unexpected token [ (Fatal)</li>
</ul>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<ul dir="auto">
<li>All</li>
</ul>
<p dir="auto">For more information, you can read all the discussion in this <a href="https://github.com/facebook/react/pull/7311#issuecomment-311516763" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/7311/hovercard">PR</a>.</p>