How to add custom html elements to headTags?

[lebalz]

Hi
I want to add ruttl to my docusaurus website. To include it, i have to add

<ruttl-poetry id="zkN*************"></ruttl-poetry>
<script src="https://web.ruttl.com/poetry.js"></script>

to every page.

I wanted to add this with the headTags config in docusaurus.config.ts, but the ruttl-poetry throws an error:

Error loading ..., "ruttl-poetry" is not a valid HTML tag.`

This is thrown here

How could i do this, without having to customize the ssrTemplate?

export default {
  headTags: [
    {
      tagName: 'ruttl-poetry',
      attributes: {
        id: 'zkN*************"'
      },
    },
  ],
};

[Josh-Cena]

Thanks. I don't think a way exists, but we can make it happen via some new customElement: true field. (We don't want to turn off tagName validation because this is still a very rare case.)

[lebalz]

This would be very helpful! 😀 Shall i open an issue, or is fine with this discussion-thread?

[slorber]

You can open a PR to add support for that customElement?: boolean attribute directly to skip the validation.

[lebalz]

Thanks for the advice, i opened a PR: #11571