Vue 3 and Closing Tags

[lperez22]

I have been using this package because we have recently upgraded to Vue 3. We allow users to build some small interfaces with a WYSIWYG tool and now Vue 3 is stricter with HTML syntax so this tool has come in handy. However I did run into some issues with closing tags. We have older content that utilizes tags to style data tables and the package was adding a closing tag which through an error in Vue. But with this issue it showed me that I can also declare Vue components as closing tags which is amazing. What I ended up doing was appending a full list of HTML5 closing tags along with components. Here is the code incase anyone else runs into this issue with Vue 3

        body = sanitizeHtml(body, {
          allowedTags: false,
          allowedAttributes: false,
          selfClosing: sanitizeHtml.defaults.selfClosing.concat([
            'col',
            'embed',
            'param',
            'source',
            'track',
            'wbr',
            'ContactList',
          ]),
          parser: {
            lowerCaseTags: false,
          },
        });

For my use case I needed to sanitize invalid HTML like unclosed divs, greater than or less than characters and allow in vue components. I turn off allowedTags which I need to allow any tag and with parser lowerCaseTags turn off it will preserve the case of our vue components. Most recently I am not appending to the selfClosing array which is an awesome feature.