“299742-nowjedi-hello”不是有效的自定义元素名称

问题描述 投票：0回答：2

我对组件开发很陌生，并且正在努力打印一个简单的 hello world。有人能帮我吗？

重现步骤：

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

退货：

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

我正在关注“开发你的组件”。知道发生了什么事吗？ https://developer.servicenow.com/dev.do#!/guide/orlando/now-experience/cli/development-flow/.

reactjs webpack components web-component
2个回答
5
投票

名字不能以数字开头

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

简短摘要：

  • start 带有 ASCII 小写字母，因此 HTML 解析器会将它们视为标签而不是文本。

  • 不要包含任何 ASCII 大写字母。

  • 包含（至少）一个连字符，用于命名空间并确保向前兼容性。

允许使用多种名称，为用例提供最大的灵活性，例如：


<math-α> or <emotion-😍>


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
名称中必须使用减号，例如：“my-test”或“my-test-element”或“my-test-element-one”
请参阅下面的完整示例：






<!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>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.