Malformed HTML warning for HTML within an attribute (i.e. Bootstrap Tooltip)

[murphye]

Describe the bug

Using Solid 1.9.3, when running npm run build I get The HTML provided is malformed and will yield unexpected output when evaluated by a browser..

I started with the Solid Bootstrap template (https://github.com/solidjs/templates/tree/main/ts-bootstrap) and narrowed down where the problem is stemming from where there is HTML within an attribute, as shown here for a Bootstrap Tooltip:

                  <button
                      type="button"
                      class="btn btn-secondary"
                      data-bs-toggle="tooltip"
                      data-bs-html="true"
                      title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
                  >
                    Tooltip with HTML
                  </button>

Your Example Website or App

none

Steps to Reproduce the Bug or Issue

The HTML provided is malformed and will yield unexpected output when evaluated by a browser.

- Expected
+ Received

- <div><section><h2>#text</h2><article><div><h3>#text</h3><a>#text</a></div><div><div><button>#text</button><button>#text</button><button>#text</button><button>#text</button><button>#text</em>#text<u>#text</u>#text<b>#text</b>#text</button></div></div></article></section></div>
+ <div><section><h2>#text</h2><article><div><h3>#text</h3><a>#text</a></div><div><div><button>#text</button><button>#text</button><button>#text</button><button>#text</button><button>#text#text<u>#text</u>#text<b>#text</b>#text</button></div></div></article></section></div>
Original HTML:
 <div class="bd-cheatsheet container-fluid bg-body"><section id=content><h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2><article class="mt-3 mb-5 pb-5"id=tooltips><div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"><h3>Tooltips</h3><a class="d-flex align-items-center"href=../components/tooltips/>Documentation</a></div><div><div class="bd-example tooltip-demo"><button type=button class="btn btn-secondary"data-bs-toggle=tooltip data-bs-placement=top title="Tooltip on top">Tooltip on top</button><button type=button class="btn btn-secondary"data-bs-toggle=tooltip data-bs-placement=right title="Tooltip on end">Tooltip on end</button><button type=button class="btn btn-secondary"data-bs-toggle=tooltip data-bs-placement=bottom title="Tooltip on bottom">Tooltip on bottom</button><button type=button class="btn btn-secondary"data-bs-toggle=tooltip data-bs-placement=left title="Tooltip on start">Tooltip on start</button><button type=button class="btn btn-secondary"data-bs-toggle=tooltip data-bs-html=true title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button></div></div></article></section></div>

Expected behavior

No error

Screenshots or Videos

No response

Platform

• OS: Linux

Additional context

No response

[ryansolid]

I see. The output appears to be correct but the validation seems to get tripped up by the tags inside the title string. Thanks for reporting.

[g-mero]

@ryansolid Same issue on <col /> and <colgroup/>

import { createMemo, For, onMount } from 'solid-js'
import context from './context'

function Col(props: { key: string, type: 'header' | 'body' }) {
  const [state, actions] = context.useContext()

  onMount(() => {
    actions.setSignalRefresh(state.signalRefresh + 1)
  })

  return (
    <col
      ref={(el) => { actions.setState(props.type === 'header' ? 'headerCols' : 'bodyCols', props.key, el) }}
      data-key={props.key}
    />
  )
}

export default function Colgroup(props: {
  type: 'header' | 'body'
}) {
  const [state] = context.useContext()
  const cols = createMemo(() => {
    if (state.data.length === 0) {
      return []
    }
    return Object.keys(state.data[0])
  })

  return (
    <>
      <colgroup>
        <For each={cols()}>
          {k => (
            <Col key={k} type={props.type} />
          )}
        </For>
      </colgroup>
    </>

  )
}

The HTML provided is malformed and will yield unexpected output when evaluated by a browser.

- Expected
+ Received

- <col>
Original HTML:
 <col>

The HTML provided is malformed and will yield unexpected output when evaluated by a browser.

- Expected
+ Received

- <colgroup></colgroup>
Original HTML:
 <colgroup></colgroup>

[titoBouzout]

PR for tags in attributes, tfoot and col/colgroup https://github.com/ryansolid/dom-expressions/pull/370

[ryansolid]

Thanks @titoBouzout

[ryansolid]

This should be fixed in the latest with the release of 1.9.3 (which I only released a few mins ago, so I assume the bug was against 1.9.2)

[CreativeTechGuy]

The bit of code which was disabled here also causes issues on custom element tag names which include special characters (eg: my_tag-name). I realize it's been commented out now, but if it ever gets removed I wanted to bring to attention that the regex that was being used misses tons of valid characters which are valid in custom element tag names.

[titoBouzout]

That's a new one for me,

// works
customElements.define( "c🦋-💭", class extends HTMLElement {
		constructor() {
			super();
			this.textContent = "hola";
		}},);

// doesnt work
try {
	document.createElement("c🦋-💭").tagName;
} catch (e) {
	console.error(e);
}

// works
const tpl = document.createElement("template");
tpl.innerHTML = "<c🦋-💭></c🦋-💭>";
const node = document.importNode(tpl.content.firstChild);

console.log(node.textContent, node.tagName);

https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name