Forbidden tag names

[Alexander Chichigin]

I get a SyntaxError: An invalid or illegal string was specified exception when I try to use

@tag('app')
@template('<p>App</p>')
@useShadow(true)
export default class App extends Slim {
  //
}

or

@tag('main')
@template('<p>App</p>')
@useShadow(true)
export default class App extends Slim {
  //
}

while

@tag('my-app')
@template('<p>App</p>')
@useShadow(true)
export default class MyApp extends Slim {
  //
}

works fine.

I don't understand why "app" and "main" tags cause exception, but if it can't be fixed it should at least be reflected in the documentation, I think, because these names are the first ones to come to mind for the whole application component. :)

[Avichay Eyal]

The Web components SPEC forbids using custom elements without dash. This is part of the spec. Since slim.js does not break any standard and follows the web standards (no black magic!) you should use valid tag names for custom elements.

[Avichay Eyal]

And one comment, There is no need to export the classes (though it is in the boilerplate), unless you are trying to use types (flow/TS).

[Alexander Chichigin]

The Web components SPEC forbids using custom elements without dash.

My bad! Didn't know that, haven't read the standard (or any comprehensive manual for that matter).

There is no need to export the classes

Yeah, I know, tried both ways with the same results. :)

Thanks anyway! 😃

[Alexander Chichigin]

But the error message still could be more informative, I think. Or maybe it couldn't. :)

[Avichay Eyal]

The error message is from the browser. Keeping the library as light as possible means that If the browser provides error, slim.js should not interfere. At least this is my point of view: minimum intervention.

[Alexander Chichigin]

That makes total sense.

Thanks again!