lines-around-directive (before: never) autofix is broken. #2

mysticatea · 2016-12-15T04:26:03Z

<template>
    <p>{{ greeting }} World!</p>
</template>

<script>
"use strict"

module.exports = {
    data() {
        return {greeting: "Hello"}
    },
}
</script>

<style scoped>
p {
    font-size: 2em;
    text-align: center;
}
</style>

// autofix

<template>
    <p>{{ greeting }} World!</p>
</template>

<script"use strict"

module.exports = {
    data() {
        return {greeting: "Hello"}
    },
}
</script>

<style scoped>
p {
    font-size: 2em;
    text-align: center;
}
</style>

- Vue components are based on HTML5 custom elements. However, HTML5 custom elements are required to be in the HTML namespace. This is not a requirement shared by Vue components. Vue itself doesn't care about the namespace of the elements that it is rendering (which will be determined at runtime based on the namespace of the parent element where it's being inserted). Therefore, it is desirable to communicate to linters and other tools what the intended namespace of a top-level <template> in an SFC is. See: https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition - Vue slots are based on HTML5 slots. However, because of the above limitation that HTML5 custom elements are always in the HTML5 namespace, the slots contained in them are also always in the HTML5 namespace. Because of Vue's flexibility on this, a Vue <slot> may appear in any namespace; content being rendered into a slot may end up in a different namespace than the namespace where it was parsed. Therefore, it is desirable to communicate to linters and other tools what the indented namespace is of content that will be rendered in a slot. From these two observations, it would be useful to set xmlns= on: 1. top-level <template> elements, and 2. elements appearing in a slot. The first is easy, but vuejs#2 has some concerns: - It's relatively difficult to determine when we're appearing in a slot. We could try checking for the slot= attribute, but that would miss cases where we use the default slot. - Because the xmlns= attribute on the resulting element would be invalid in HTML5 (in the cases where this is useful, anyway), we can't set it on normal elements anyway. So, mostly because of the second reason, let's just say that to inform linters about a change in namespace because of a slot, the contents must be wrapped in a <template> to safely set xmlns= in a place that will be ignored at runtime. So now we've revised that to allowing xmlns= on: 1. top-level <template> elements, and 2. <template> elements appearing in a slot. Let's just make things simple and allow it for all <template> elements. This means we'll be slightly too lax, and allow it on <template v-if="..."> constructs, but I'm OK with that. As for which namespaces to consider valid, let's limit that to HTML, SVG, and MathML, as those are the namespaces that are allowed in an HTML5 document.

- Vue components are based on HTML5 custom elements. However, HTML5 custom elements are required to be in the HTML namespace. This is not a requirement shared by Vue components. Vue itself doesn't care about the namespace of the elements that it is rendering (which will be determined at runtime based on the namespace of the parent element where it's being inserted). Therefore, it is desirable to communicate to linters and other tools what the intended namespace of a top-level <template> in an SFC is. See: https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition - Vue slots are based on HTML5 slots. However, because of the above limitation that HTML5 custom elements are always in the HTML5 namespace, the slots contained in them are also always in the HTML5 namespace. Because of Vue's flexibility on this, a Vue <slot> may appear in any namespace; content being rendered into a slot may end up in a different namespace than the namespace where it was parsed. Therefore, it is desirable to communicate to linters and other tools what the indented namespace is of content that will be rendered in a slot. From these two observations, it would be useful to set xmlns= on: 1. top-level <template> elements, and 2. elements appearing in a slot. The first is easy, but #2 has some concerns: - It's relatively difficult to determine when we're appearing in a slot. We could try checking for the slot= attribute, but that would miss cases where we use the default slot. - Because the xmlns= attribute on the resulting element would be invalid in HTML5 (in the cases where this is useful, anyway), we can't set it on normal elements anyway. So, mostly because of the second reason, let's just say that to inform linters about a change in namespace because of a slot, the contents must be wrapped in a <template> to safely set xmlns= in a place that will be ignored at runtime. So now we've revised that to allowing xmlns= on: 1. top-level <template> elements, and 2. <template> elements appearing in a slot. Let's just make things simple and allow it for all <template> elements. This means we'll be slightly too lax, and allow it on <template v-if="..."> constructs, but I'm OK with that. As for which namespaces to consider valid, let's limit that to HTML, SVG, and MathML, as those are the namespaces that are allowed in an HTML5 document.

mysticatea added the bug label Dec 15, 2016

mysticatea self-assigned this Dec 15, 2016

mysticatea closed this as completed in 7576255 Dec 16, 2016

LukeShu mentioned this issue Jul 7, 2018

Allow xmlns= on <template> elements #27

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lines-around-directive (before: never) autofix is broken. #2

lines-around-directive (before: never) autofix is broken. #2

mysticatea commented Dec 15, 2016

lines-around-directive (before: never) autofix is broken. #2

lines-around-directive (before: never) autofix is broken. #2

Comments

mysticatea commented Dec 15, 2016