Doesn't work with web components with custom attributes

[bschlenk]

If I pass in an html string with attributes this doesn't recognize, they are not included in the props.

<my-custom-element label="mylabel" my-custom-prop="someValue"></my-custom-element>

This will only include label, but not my-custom-prop.

[remarkablemark]

@bschlenk Yes, that behavior is intended. It ensures the attribute is translated to an attribute supported by React.

Could the replace option be used in your case?

[bschlenk]

React supports all attributes, that’s how it’s able to support custom elements. It will gladly pass along any prop you give it if the html tag isn’t recognized. I’m not sure about the exact behavior, it might require that the tag is a valid custom element (it has at least one hyphen and all lower case). I can create a code pen demonstrating this if you want.

[bschlenk]

Here’s the issue where they talk about supporting any attribute for custom elements: facebook/react#2746

It looks like it’s been supported since React 0.14 React 16.

Here’s a better link to their blog post about it: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

[remarkablemark]

I didn't realize React made the change in 16+, thanks for sharing the link @bschlenk

I'm open to making a backwards compatible change to allow for this

[bschlenk]

To make it backwards compatible it would probably have to check what version of react is installed. I'm not sure on the exact logic, but here's what I'm thinking:

if react.version >= 16:
  if isCustomElement:
    don't alter props at all
  else:
    alter props as usual, but also pass any unrecognized props unaltered
else:
  same logic as before

I made these changes on my machine, I can send you a pull request once I get tests written.

[remarkablemark]

html-react-parser v0.5.0 was released:

You can install the version:

# with npm
$ npm install --save html-react-parser@0.5.0

# or with yarn
yarn add html-react-parser@0.5.0

Thanks for adding this feature @bschlenk!

[sinchang]

seems doesn't work if web components have style attributes.

Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

[remarkablemark]

@sinchang Can you help me provide a reproducible example with CodeSandbox, JSFiddle, or Repl.it?

If we can confirm this is a bug, let's create a new issue.

[sinchang]

@remarkablemark I created a demo on https://codesandbox.io/s/html-react-parser-forked-vll1t?file=/src/index.js:281322-281329, please have a look.

[remarkablemark]

@sinchang Can you open a new issue and update your demo so html-react-parser only parses the HTML:

<share-widget-desktop style="display: none; position: absolute;"></share-widget-desktop>

Since that's enough to reproduce the bug?