While working on creating the wp-show directive attribute, I wasn't sure the HTML that should be returned when wp-show evaluates as false. I'm opening this issue to discuss the implications of the different alternatives and decide on an approach.

Given the following HTML:

<div data-wp-show="false" class="my-class">
  <p>Children</p>
</div>

I considered two alternatives:

Option 1 - Wrapped everything inside the <template> tag

<template>
  <div data-wp-show="false" class="my-class">
    <p>Children</p>
  </div>
</template>

Option 2 - Wrapped children inside the <template> tag

<div data-wp-show="false" class="my-class">
  <template>
    <p>Children</p>
  </template>
</div>

As I mentioned, I don't know the pros and cons of each alternative, so I'd love to hear your thoughts. Whatever we decide, should probably be applied to similar directives like wp-each to keep consistency.

Alpinejs is using the second approach. For directives like x-if or x-for, they used them directly in the <template> tags, and it requires that <template> MUST contain only one root element.

On the other hand, if not explained properly, I feel that Option 2 could cause unexpected layout issues.