Search code examples
reactjswebpackcomponentsweb-component

"299742-nowjedi-hello" is not a valid Custom Element name

I am quite new on component development and struggling printing a simple hello world. Can someone help me?

Steps to reproduce:

1. now-cli login --host stack.service-now.com
2. now-cli project --name nowjedi-hello -- description 'A web component printing Hello World'
3. npm install
4. now-cli develop --open

Returns:

SyntaxError: Failed to execute 'define' on 'CustomElementRegistry': "299742-nowjedi-hello" is not a valid custom element name

I am following "Developing your component". Any idea what going on? https://developer.servicenow.com/dev.do#!/guide/orlando/now-experience/cli/development-flow/.

Solution

  • You can't start a name with a digit

    source: https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name

    short summary:

    • start with an ASCII lower alpha, so the HTML parser will treat them as tags instead of as text.

    • do not contain any ASCII upper alphas.

    • contain (at least) one hyphen, used for namespacing and to ensure forward compatibility.

    A large variety of names is allowed, to give maximum flexibility for use cases like:

    • <math-α>
    • <emotion-😍>
    • <web-compomenents-are-cool>

    Note: inside your Web Component script the name is available as this.nodeName