LinusBorg / portal-vue

A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your app or the entire document. (Vue 2 version: v2.portal-vue.linusb.org)
http://portal-vue.linusb.org
MIT License
3.89k stars 188 forks source link

Fix using uppercase in element name #358

Open hacknug opened 2 years ago

hacknug commented 2 years ago

This PR makes the default name for the portal element lowercase. Some linters don't like it when you use uppercase characters for this and, given browsers turn element and attribute names to lowercase when rendering the page, it's somewhat hard to know where the issue/warning comes from.

More info:

Let me know if you'd like me to make any changes to this PR before mergin it in 👍

LinusBorg commented 2 years ago

I'd be interested to to learn where a linter might protest about this?

I used uppercase as tagNames are in fact uppercase in JS DOM:

const div1 = document.createElement('DIV')
const div2 = document.createElement('div')
div1.tagName // => 'DIV'
div2.tagName // => 'DIV'

Given that Vue uses document.createElement to create elements, and given how that API doesn't care about the casing of it's argument, I struggle to see at which point a linter could cause trouble here?

hacknug commented 2 years ago

Of course! I'm using @nuxtjs/html-validator and it complains when I don't have tag="div" because of it.

Attaching a screenshot to show the logged error and generated HTML: