自定义HTML元素已加入DOM树但SVG内容未在页面显示

你的自定义元素里的SVG图形不显示，核心原因是创建SVG及内部元素时没有使用SVG命名空间。浏览器对SVG元素有特殊处理，必须通过带命名空间的API创建，否则会被当作普通HTML节点，无法正确渲染。

当你在开发者工具里编辑HTML并保存时，浏览器会自动识别SVG标签并赋予正确的命名空间，所以图形能正常显示。

修复代码 #

修改#render方法，将document.createElement替换为document.createElementNS，指定SVG的命名空间http://www.w3.org/2000/svg：

class PieChart extends HTMLElement {
    constructor() {
        super();
    } 

    init() {
        this.#render();
    }

    #render() {
        // 使用SVG命名空间创建circle元素
        const circleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circleElement.setAttribute("cx", 100);
        circleElement.setAttribute("cy", 100);
        circleElement.setAttribute("r", 80);
        circleElement.setAttribute("fill", "none");
        circleElement.setAttribute("stroke", "green");
        circleElement.setAttribute("stroke-width", 40);
        circleElement.setAttribute("stroke-dasharray", `502.85 502.85`);

        // 使用SVG命名空间创建svg元素
        const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svgElement.style.display = "block";
        svgElement.style.width = "inherit";
        svgElement.style.height = "inherit";
        svgElement.setAttribute("viewBox", `0 0 200 200`);
        svgElement.append(circleElement);

        this.appendChild(svgElement);

        this.style.display  = "block";
        this.style.width = "200px";
        this.style.height = "200px";
    }

    connectedCallback() {
        const event = new CustomEvent("init", {
            bubbles: true
        });
        this.dispatchEvent(event);
    }
}

customElements.define(
    "pie-chart",
    PieChart
);

另外，HTML里的init事件回调中，element.init(this)的this没有实际作用，可以简化为：

<script>
    document.body.addEventListener("init", (pEvent) => {
        const element = pEvent.target;
        element.init();
    });
</script>

原理说明 #

SVG属于XML命名空间下的元素，浏览器需要明确知道这些节点属于SVG命名空间才能正确解析渲染。普通的document.createElement创建的是HTML命名空间的节点，即使标签名是svg或circle，也不会被当作SVG图形处理。

而通过document.createElementNS指定SVG命名空间后，浏览器会将这些节点识别为SVG元素，进而正确渲染图形。

内容的提问来源于stack exchange，提问作者Krusty the Clown