Skip to content

Commit

Permalink
Update: allow xmlns attribute on <template> elements (#27)
Browse files Browse the repository at this point in the history
- 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.
  • Loading branch information
LukeShu authored and mysticatea committed Jul 9, 2018
1 parent 7a9bde9 commit f6f42bb
Show file tree
Hide file tree
Showing 5 changed files with 1,596 additions and 1 deletion.
17 changes: 16 additions & 1 deletion src/html/parser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,22 @@ export class Parser {
this.closeCurrentElementIfNecessary(token.name)

const parent = this.currentNode
const namespace = this.detectNamespace(token.name)
let namespace = this.detectNamespace(token.name)
if (token.name === "template") {
for (const attribute of token.attributes) {
if (attribute.key.name !== "xmlns") {
continue
}
const value = attribute.value && attribute.value.value
if (
value === NS.HTML ||
value === NS.MathML ||
value === NS.SVG
) {
namespace = value
}
}
}
const element: VElement = {
type: "VElement",
range: [token.range[0], token.range[1]],
Expand Down
Loading

0 comments on commit f6f42bb

Please sign in to comment.