Question

在using custom elements的MDN文档中，他们详细说明了自定义内置元素的示例：

def confusion_matrix_dask(truth,predictions,labels_list=[]):
    TP=0
    FP=0
    FN=0
    TN=0
    if not labels_list:
        TP=(truth[predictions==1]==1).sum()
        FP=(truth[predictions!=1]==1).sum()
        TN=(truth[predictions!=1]!=1).sum()
        FN=(truth[predictions==1]!=1).sum()
    for label in labels_list:
        TP=(truth[predictions==label]==label).sum()+TP
        FP=(truth[predictions!=label]==label).sum()+FP
        TN=(truth[predictions!=label]!=label).sum()+TN
        FN=(truth[predictions==label]!=label).sum()+FN


    return np.array([[TN.compute(), FP.compute()] , [TN.compute() ,FN.compute()]])

允许这种用法：

customElements.define('expanding-list', ExpandingList, { extends: "ul" });

我想知道是否可以以相同的方式自定义另一个自定义元素？例如，如果我创建了一个名为<ul is="expanding-list"> ... </ul>的元素，并且想要拥有它的变体，那么我可能想创建一个新的custom-element类，并以相同的方式对其进行定义，以便能够像这样使用它：

special-custom-element

但是，系统提示我错误： <custom-element is="special-custom-element"> ... </custom-element>

尝试运行以下内容时：

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "custom-element" is a valid custom element name

这是我做错了吗，还是此行为严格限于内置元素？除了链接到页面上的内容外，我发现很难找到有关此行为的任何信息，因此我希望从了解规格的人那里获得一些建议。

Answer 1

由于以下原因，您无法做到这一点：

您可以创建两种类型的自定义元素：

自治定制元素：独立元素；它们不继承自内置HTML元素。

自定义的内置元素：这些元素继承自并扩展了内置HTML元素。

customElements.define('word-count2', WordCount2, {extends: 'p'});

用于扩展built-in elements。

您必须走Autonomous custom element路线as per the docs

这是一个主意：

// Create a class for the element
class MyElement extends HTMLElement {
  constructor(text) {
    // Always call super first in constructor
    super();
    // Create a shadow root
    var shadow = this.attachShadow({
      mode: 'open'
    });
    // Create the span
    var wrapper = document.createElement('span');
    wrapper.textContent = !!text ? text : 'foo';

    shadow.appendChild(wrapper);
  }
}

class MyElement2 extends MyElement {
  constructor() {
    // Always call super first in constructor
    super('bar');
  }
}

// Define the new element
customElements.define('my-element', MyElement);
customElements.define('my-element2', MyElement2);

<div>
  <my-element text="">
</div>
<div>
  <my-element2 text="">
</div>

现在您仍然可以扩展您的类（，并自定义内置元素）并访问super的输出，这样对您和某些扩展都可能有用可能会让您得到所需的东西：

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text.split(/\s+/g).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // Create a shadow root
    const shadow = this.attachShadow({
      mode: 'open'
    });

    // Create text node and add word count to it
    const text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    text.textContent = count;
  }
}

class WordCount2 extends WordCount {
  constructor() {
    // Always call super first in constructor
    super();
    console.log(this.shadowRoot.textContent)
  }
}

// Define the new element
customElements.define('word-count', WordCount, {
  extends: 'p'
});
customElements.define('word-count2', WordCount2, {
  extends: 'p'
});

<div>
  <h2>Sample heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar sed justo sed viverra. Aliquam ac scelerisque tellus. Vivamus porttitor nunc vel nibh rutrum hendrerit. Donec viverra vestibulum pretium. Mauris at eros vitae ante pellentesque bibendum.
    Etiam et blandit purus, nec aliquam libero. Etiam leo felis, pulvinar et diam id, sagittis pulvinar diam. Nunc pellentesque rutrum sapien, sed faucibus urna sodales in. Sed tortor nisl, egestas nec egestas luctus, faucibus vitae purus. Ut elit nunc,
    pretium eget fermentum id, accumsan et velit. Sed mattis velit diam, a elementum nunc facilisis sit amet.</p>
  <p is="word-count"></p>
</div>

<div>
  <h3>Sample heading</h3>
  <p>Lorem ipsum dolor sit amet, consec Sed tortor nisl, egestas nec egestas luctus, faucibus vitae purus. Ut elit nunc, pretium eget fermentum id, accumsan et velit. Sed mattis velit diam, a elementum nunc facilisis sit amet.</p>
  <p is="word-count2"></p>
</div>

Answer 2

您也可以这样做类SpecialCustomElement扩展CustomElement { ... } customElements.define（'special-custom-element'，SpecialCustomElement，{扩展名：'ul'}）;

并且可以将其用作

...

是否可以自定义另一个自定义元素，还是只能自定义内置函数？

2 个答案: