Add errorMessageListItemWithHTML to parse an HTML string for rendering

* For cases where we need to render rich error markup (such as server-
	rendered errors), this method provides us with a (mostly) safe way of
	doing so by utilizing `DOMParser`
	* See: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString

Author: tcannonfodder

src/rendering.js

@@ -70,6 +70,24 @@ export function errorMessageListItem(message, type) {
   return clone
 }
 
+/**
+ * Clones the {@link errorListItemTemplate}, parsing the given HTML string and inserting it into the element with `[data-pf-error-message]` to the message,
+ * and setting the `data-pf-error-type` to the given type.
+ *
+ * @params {string} htmlString the HTML content to render in the string
+ * @params {string} type the value that will be used for `data-pf-error-type``
+ * @returns {Element} the cloned element
+ */
+export function errorMessageListItemWithHTML(htmlString, type) {
+  const clone = errorListItemTemplate().content.cloneNode(true).querySelector(`*:first-child`)
+
+  const parsedDocument = new DOMParser().parseFromString(htmlString, "text/html")
+
+  clone.setAttribute(`data-pf-error-type`, type)
+  clone.querySelector(`[data-pf-error-message]`).replaceChildren(parsedDocument.body.firstChild)
+  return clone
+}
+
 /**
  * Clears the error messages from the list, while keeping preserved errors.
  * Removes the `data-pf-error-visible` attribute from any preserved attributes

test/rendering.test.js

@@ -87,6 +87,30 @@ suite('Rendering', async () => {
     assert.equal(true, itemElement.hasAttribute(`data-pf-error-preserve`))
   })
 
+  test(`errorMessageListItemWithHTML`, async() => {
+    const container = await fixture(html`
+      <div>
+        <p>Some content</p>
+
+        <template id="pf-error-list-item-template">
+          <li><span>‼️</span> <span data-pf-error-message></span></li>
+        </template>
+      </div>
+    `)
+
+    const htmlString = `<strong>Richly <a href="https://example.com">rendered</a> errors!</strong>`
+
+    const itemElement = Rendering.errorMessageListItemWithHTML(htmlString, "a-custom-type")
+
+    assert.equal("a-custom-type", itemElement.getAttribute(`data-pf-error-type`))
+    assert.equal(htmlString, itemElement.querySelector(`[data-pf-error-message]`).innerHTML)
+    assert.equal("‼️ Richly rendered errors!", itemElement.textContent)
+    assert.equal(false, itemElement.hasAttribute(`data-pf-error-preserve`))
+
+    itemElement.setAttribute(`data-pf-error-preserve`, true)
+    assert.equal(true, itemElement.hasAttribute(`data-pf-error-preserve`))
+  })
+
   test(`renderConstraintValidationMessageForElement: the input is valid`, async () => {
     const container = await fixture(html`
       <div>