CODEWITHSUNDEEP
reactjswebpackcomponentsweb-component
Rafael Cardoso
Rafael Cardoso

Reputation: 141

"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/.

Upvotes: 3

Views: 3749

Answers (2)

Danny '365CSI' Engelman
Danny '365CSI' Engelman

Reputation: 21173

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

Upvotes: 8

Amit
Amit

Reputation: 61

Must use minus sign in name eg:"my-test" OR "my-test-element" OR "my-test-element-one" See below complete example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
<my-test-element-one>
</my-test-element-one>
<script>
class my_test_element_one extends HTMLElement{
  connectedCallback(){
    this.innerHTML=`  <div class="myclass" style=" width:600px;height:500px; background-color:green">
            <img src="https://images.pexels.com/photos/267415/pexels-photo-267415.jpeg?auto=compress&cs=tinysrgb&w=300" />
    </div>`
  }
}
customElements.define('my-test-element-one', my_test_element_one);
</script>
</body>
</html>

Upvotes: 0

Related Questions