In your use cases number 4 it appears that you can override existing tags. However, I am trying to override the image-x-icon tag and Helmet is not overriding the initial tag, just adding an additional one. Is this intentional for tags of this type?
Currently, if you are trying to render a tag like this: <link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" /> the primary attribute for the tag would be the href, so if the parent and child have different hrefs, it will render both.
This use case is not currently handled. Thanks for bringing it to our attention. I know we have a rule for canonical links. I think we can make the check more general to say any tags with the same rel except for stylesheets will be considered equal. And thus, the child component can overwrite it.
If we switch the statement to always overwrite if the rel values are the same, we'll need to call out ALL exceptions that cascade, like stylesheet.
Perhaps we could add a "key" attribute that would allow overwriting parent tags with the same key? I think it would be pretty easy to implement, and it would allow opting-in for a specific, non-standard replacement (thinking about JSON Schema script tags here)
@emilecantin I have another idea to solve this problem by setting preserved explicitly like this way:
<Helmet preserved>
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">
<link rel="apple-touch-icon" sizes="256x256" href="touch-icon-large.png">
</Helmet>
<Helmet preserved={false}>
<meta name="description" content="category of my site" />
</Helmet>
Most helpful comment
Perhaps we could add a "key" attribute that would allow overwriting parent tags with the same key? I think it would be pretty easy to implement, and it would allow opting-in for a specific, non-standard replacement (thinking about JSON Schema script tags here)