Bundle Breaks customizable `<select>` when using `<selectedcontent>`

[g12n]

The Eleventy Bundle Plugin breaks HTML structure by prematurely closing customisable <select> elements, even when the plugin is enabled even if not actively used in templates.

This bug breaks the HTML output structure and makes customizable <select> when using <selectedcontent> elements non-functional.

Example Code

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

See The customizable select by Brecht De Ruyte and The selected option display element on MDN

Bug Impact

When eleventyConfig.addBundle("css") is enabled in the Eleventy config:

• Code using <selectedcontent> inside <select> tags will cause the select to be closed immediately after opening
• Child elements (<button>, <option>) are rendered outside the select element
• The resulting HTML is structurally invalid
• This occurs even when no bundle features are actually used in the templates

Reproduction Steps

I have setup a Repository with a test-case for this issue: https://github.com/g12n/customizable-select-11ty-test

Expected vs Actual Output

Source Template

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="pokeball">
    <img src="https://assets.codepen.io/159218/pokeball.svg" alt="" />
    Pokeball
  </option>
  <option value="greatball">
    <img src="https://assets.codepen.io/159218/great-ball.svg" alt="" />
    Great ball
  </option>
  <option value="ultraball">
    <img src="https://assets.codepen.io/159218/ultra-ball.svg" alt="" />
    Ultra ball
  </option>
</select>

WITHOUT Bundle Plugin (CORRECT)

Output: _site-without-bundle/index.html

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="pokeball">
    <img src="https://assets.codepen.io/159218/pokeball.svg" alt="" />
    Pokeball
  </option>
  <!-- ... more options ... -->
</select>

Result: HTML structure is preserved correctly.

WITH Bundle Plugin (BROKEN)

Output: _site-with-bundle/index.html

<select>
  </select><button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="pokeball">
    <img src="https://assets.codepen.io/159218/pokeball.svg" alt="">
    Pokeball
  </option>
  <!-- ... more options ... -->

Key Differences

Aspect	Without Bundle	With Bundle
<select> structure	Properly nested	Prematurely closed
<button> location	Inside <select>	Outside <select>
<option> elements	Inside <select>	Outside <select>

Environment

• Eleventy Version: 3.1.2
• Plugin Version: @11ty/eleventy-plugin-webc 0.11.2

Related Resources

• Customizable Select HTML Pattern
• The selected option display element
• Customizable Select on MDN
• HTML parser changes for customizable <select> #10310

Notes

• The bug affects multiple template engines (HTML, WebC, etc.)
• The bundle plugin doesn't need to be actively used to trigger the bug
• Simply having eleventyConfig.addBundle("css") in the config is enough to break the output

Suspected Root Cause: PostHTML

I Suspect that PostHTML (v0.16.7) is the underlying cause of this bug. When processing <select> elements with non-standard children like <button> and custom elements, PostHTML prematurely closes the <select> tag.

I think the Eleventy Bundle Plugin uses PostHTML internally, which is why enabling the bundle plugin triggers this behavior.

This isolated test demonstrates that PostHTML alone (without Eleventy or the Bundle Plugin) causes premature closure.

[g12n]

I Created an Isse at PostHTML posthtml/posthtml#408

[zachleat]

That one looks like it trips up a few upstream parsers!

https://astexplorer.net/