创建扩展 SVGCircleElement 的自定义元素时出错

Question

我有以下节点 class，我用它来创建自定义元素 node-element。

class Node extends SVGCircleElement{
    static get observedAttributes() {
        return ["coordinates"];
      }
    constructor()
    {
        super();
        this.attributeMap = {coordinates:(coordinates)=>this.updateCoordinates(coordinates)}
    }
    connectedCallback(){
        this.initNode();
    }
    updateCoordinates(coordinates)
    {
        this.setAttribute("cx",`${coordinates.x}`);
        this.setAttribute("cy",`${coordinates.y}`);
        this.setAttribute("r",50);
    }
    initNode()
    {
        this.className="node";
    }
    attributeChangedCallback(name,oldValue,newValue)
    {
        if(oldValue!==newValue)
        {
            this.attributeMap[name](JSON.parse(newValue))
        }
    }
}

我使用以下方式注册此元素：-

customElements.define('node-element',Node);

我正在按如下方式创建此元素：-

let newNode = document.createElement("node-element");

这是我收到以下错误的地方：-

Uncaught TypeError: Illegal constructor
    at new Node (index.js:9)
    at SVGSVGElement.drawNode (index.js:43)

第43行对应createElement代码

Answer 1

很想被证明是错误的，刚刚花了 2 个月的时间在一个 SVG 项目上

据我所知，您不能扩展 SVG 元素

您只能在 HTML 命名空间 http://www.w3.org/1999/xhtml

中创建自定义元素

SVG 元素在 SVG 命名空间中 http://www.w3.org/2000/svg

来自文档：https://html.spec.whatwg.org/multipage/custom-elements.html#element-definition

If the element interface for extends and the HTML namespace is HTMLUnknownElement,
then throw a "NotSupportedError" DOMException.

和

if namespace is not the HTML namespace, return null

正在进行的关于允许其他名称空间的 W3C 讨论在此处：https://github.com/w3c/webcomponents/issues/634

HTML命名空间也有限制

Apple/Safari 实施了 自主自定义元素 （从 HTML 元素扩展）

但拒绝实施自定义内置元素（从HTML命名空间扩展任何内置元素）

如果你想生成 SVG，你必须扩展 HTMLElement 并生成整个 SVG 标签：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='V'><circle cx='X' cy='Y' r='R'/></svg>

创建扩展 SVGCircleElement 的自定义元素时出错

Getting error while creating a custom element which extends SVGCircleElement

javascript

svg

web-component

custom-element

相关自定义元素 SVG Whosebug 问题与解答