Custom HTML elements are not supported by compiler

[benouat]

Simply try to use a web component that follow the official naming convention from a template and you'll get a nice error !

{template whatever}
  <h1>Hello Web Components</h1>
  <x-custom></x-custom>
{/template}

gives

Invalid HTML element syntax

We basically need to had - as a valid character in the peg grammar.

[benouat]

From the html5rocks great article about webcomponents:

The name must contain a dash (-). So for example, <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This restriction allows the parser to distinguish custom elements from regular elements but also ensures forward compatibility when new tags are added to HTML.

[b-laporte]

Yes - I am aware of this problem for a while - this has to be fixed indeed

[benouat]

I might be wrong, because now it seems to work.... don't know what i did wrong yesterday...
Weird...

[benouat]

Sorry for the noise... it apparently is working
Hence I am closing it.

[PK1A]

@b-laporte are you aware of the case where it doesn't work? I've just tried this test:

it('should correctly compile templates with HTML elements containing -', function () {
        var r =compiler.compile('{template x()}\n' +
            '<x-div></x-div>\n' +
            '{/template}', 'x.js');
        assert.equal(r.errors.length, 0);
    });

and it passes OK.

[b-laporte]

Well - I remember it didn't work some while ago as I tried to create custom components with dashses and it didn't work - but it was 6 months ago or so.. So I guess the parser has been improved - but we should definitely add a compiler and a runtime time test to validate it..

[PK1A]

OK, I'm going to push this test then - better to be safe than sorry.

[b-laporte]

OK thanks - but I would also add a runtime test to validate that we do create the element with the dash name in the DOM...

Note: I just remember the problem I had: if we want to create a component with a dash name we need to add a function to convert dashes to mixed case as template names need to be valid JS identifiers..

[PK1A]

@b-laporte OK, I've pushed a test for the standard HTML case (2f408ba) and opened a separate issue for custom #space components (#248).