Question

我有一个像这样定义的自定义元素：

class SquareLetter extends HTMLElement {
    constructor() {
        super();
        this.className = getRandomColor();
    }
}
customElements.define("square-letter", SquareLetter);

当JavaScript文件包含在HTML <head>标记中时，Chrome控制台会报告此错误：

未捕获的DOMException：无法构造＆＃39; CustomElement＆＃39;：结果必须没有属性

但是当JavaScript文件包含在</body>结束标记之前时，一切正常。原因是什么？

<head>
    <script src="js/SquareLetter.js"></script> <!-- here -->
</head>
<body>
    <square-letter>A</square-letter>
    <script src="js/SquareLetter.js"></script> <!-- or here -->
</body>

Answer 1

当CreatElement与CustomComponent一起使用时，我会遇到相同的问题。直到我删除了构造函数中的所有东西，但超级函数才改为connectedCallback函数，该问题才得以解决。

Answer 2

在大多数情况下，问题在于您试图创建一个元素，该元素在首次添加到DOM时会神奇地具有属性，这对于HTML元素而言并不是预期的行为。考虑一下：

 async function data(pathToCsv) {
        return await d3.csv(pathToCsv, function (data) {
            data.year = +data.year
            data.running_total = +data.running_total
            data.date = new Date(data.year, 0)
            return data
        })
   };

  async function init() {
     let dataset = await data('q3.csv');
     // this should work now assuming you are using d3 function correctly as i'm not aware of d3 functions myself
     console.log(dataset.year); 
  }

  init()

对于div和所有其他元素类型，您将永远不会创建一个已经具有诸如之类的属性的DOM元素。在使用private async void baslatKontrol_CheckedChanged(object sender, EventArgs e) { RegistryKey rk = Registry.CurrentUser.OpenSubKey ("SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run", true); string yol = Path.Combine(Environment.CurrentDirectory, "Asistanim.exe"); if (baslatKontrol.Checked) { rk.SetValue(yol, Application.ExecutablePath); veri.Baslat = true; await JsonVeriden(veri); } else { rk.DeleteValue(yol, false); veri.Baslat = false; await JsonVeriden(veri); } }创建元素之后，总是添加类和所有其他属性，例如：

const div = document.createElement("div");
document.body.append(div);

.createElement()将永远不会创建已经具有属性（例如类）的元素。自定义元素也是如此。因此，如果发生以下情况，这将是意外的：

const div = document.createElement("div");
div.className = "random-class";
document.body.append(div);

添加了一个.createElement()之类的DOM元素。您不应该在实际的自定义元素中添加类之类的属性。如果要添加属性和样式，则应将shadowRoot附加到元素上，然后添加一个div，例如，可以在其中添加所需的任何属性，同时使实际的自定义元素不包含属性。

无法构建＆＃39; CustomElement＆＃39; JavaScript文件放在头部时出错

2 个答案: