Let's say I have a web component called <x-interaction>. I want to pass the ID of the post to the web component as an attribute, so I write a shortcode to render the ID.

add_shortcode('get_the_id', 'get_the_ID');

In the post I write the following:

<x-interaction postid=[get_the_id]>
  <span slot="title">This is slotted content</span>

So far, so good.

But the shortcode isn't rendered on the page. The shortcode appears verbatim in the rendered HTML.

I want this:

<x-interaction postid="4">

But I get this:

<x-interaction postid="[get_the_id]">

What? 😵‍💫

As an experiment, I removed the hyphen from the tag name, and the shortcode renders appropriately: <xinteraction>

<xinteraction postid="4">

This seems to be related to the hyphen in the web component tag name. Or something else with Wordpress and web components that I don't know.

  • 1
    Shortcodes are explicitly not intended to be used in HTML attributes. This is a mis-use of shortcodes. Besides, shortcodes are an antiquated feature of WordPress. The proper way to implement this would be with a custom block. Apr 22 at 12:11
  • If you insist on using shortcodes then the proper solution would be to make this whole block of HTML a shortcode, not just the id. Something like [x_interaction id="4" title="This is slotted content"] which output the markup you wanted. Apr 22 at 12:12


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.