<div class="flex flex-col">
  <div class="py-4 mb-4" 
    x-data="{ options: ['hello', 'world'], selected: 'world' }"
  >
    <h3 id="x-show" class="text-xl font-semibold text-gray-900 mb-4">
      Hiding pre-rendered content with 
        x-show
    </h3>
    <p>
      <span 
        x-show="true"
      >pre-rendered content that won't be hidden
    
    
      the content in "pre-rendered to be hidden"
      will get hidden
    
    
      the content in "pre-rendered to be hidden" will
      get hidden
    
    
      Example with a select that doesn't quite work, we end up with 2 "hello"
      options, one is selected &amp; hidden and the other is visible and unselected:
    </p>
    <select 
      x-model="selected"
    >
      <template 
        x-for="o in options" :key="o"
      >
        <option :value="o" 
          x-text="o" :selected="o === selected"
        ></option>
      </template>
      
        <option :value="o" 
                  x-text="o" :selected="o === selected" value="hello"
                >hello</option>
      
        <option :value="o" 
                  x-text="o" :selected="o === selected" value="world" selected="selected"
                >world</option>
      <option 
        x-show="false" value="hello" selected="" style="display: none;"
      >hello</option>
    </select>
  </div>
  <div class="mb-4" 
    x-data="{ text: 'alpine-render', html: '&lt;button&gt;btn from alpine&lt;/button&gt;' }" 
    x-init="setTimeout(() => {
      text = 'alpine-render-2';
      html = '<button>alpine-render-2</button>';
    }, 1000);
    ">
    <h3 id="x-html-x-text" class="text-xl font-semibold text-gray-900 mb-4">
      Overwriting HTML/text with 
        x-html/
        x-text
    </h3>
    <span 
      x-text="text"
    >alpine-render</span>
    <div 
      x-html="html"
    ><button>btn from alpine</button></div>
  </div>
  <div class="mb-4" 
    x-data="{ options: ['hello', 'world'], selected: 'world' }" 
    x-init="
      $refs.remove1.remove();
      $refs.remove2.remove();
      $refs.remove3.remove();
    ">
    <h3 id="x-refs-remove" class="text-xl font-semibold text-gray-900 mb-4">
      Removing single nodes using 
        x-ref + 
        x-init
    </h3>
    <p class="mb-2">
      The following text will get removed with 
        x-ref approach ""
    </p>
    <p class="mb-2">
      As will the following text: ""
    </p>
    <p class="mb-2">
      A more sensible example with the "select" that works... mostly ("world"
      should be selected)
    </p>
    <select 
      x-model="selected"
    >
      <template 
        x-for="o in options" :key="o"
      >
        <option :value="o" 
          x-text="o" :selected="o === selected"
        ></option>
      </template>
      
    
        <option :value="o" 
                      x-text="o" :selected="o === selected" value="hello"
                    >hello</option>
      
        <option :value="o" 
                  x-text="o" :selected="o === selected" value="world" selected="selected"
                >world</option>
      </select>
  </div>
  <div class="mb-4" 
    x-data="{ options: ['hello', 'world'], selected: 'world' }" 
    x-init="
      $el.querySelectorAll('[x-remove]')
        .forEach(e => e.remove());
    ">
    <h3 id="x-remove" class="text-xl font-semibold text-gray-900 mb-4">
      Removing nodes using 
        x-remove + 
        x-init
    </h3>
    <p class="mb-2">
      The following text will get removed with 
        x-ref approach ""
    </p>
    <p class="mb-2">
      As will the following text: ""
    </p>
    <p class="mb-2">
      A more sensible example with the "select" that works... mostly ("world"
      should be selected)
    </p>
    <select 
      x-model="selected"
    >
      <template 
        x-for="o in options" :key="o"
      >
        <option :value="o" 
          x-text="o" :selected="o === selected"
        ></option>
      </template>
      
    
        <option :value="o" 
                      x-text="o" :selected="o === selected" value="hello"
                    >hello</option>
      
        <option :value="o" 
                  x-text="o" :selected="o === selected" value="world" selected="selected"
                >world</option>
      </select>
  </div>
</div>