portal-vue icon indicating copy to clipboard operation
portal-vue copied to clipboard

Fix using uppercase in element name

Open hacknug opened this issue 3 years ago • 2 comments

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:

  • https://html-validate.org/rules/element-case.html

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

hacknug avatar Nov 24 '21 12:11 hacknug

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?

LinusBorg avatar Nov 24 '21 14:11 LinusBorg

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:

  • Captura de pantalla 2021-11-25 a las 12 27 02
  • Captura de pantalla 2021-11-25 a las 12 34 23

hacknug avatar Nov 25 '21 11:11 hacknug