HTML自定义元素本身不支持懒加载，其初始化、资源加载和渲染需手动控制；可通过IntersectionObserver监听进入视口后触发loadAndRender，避免在constructor中提前fetch，并兼容SSR/hydration。
什么是 HTML 自定义元素，它能直接支持懒加载吗？
不能。原生 customElements.define() 注册的自定义元素本身不带懒加载能力——它只是个 DOM 构造器，渲染时机完全由你控制。所谓“懒加载组件”，实际是指：组件实例化、资源加载（如 JS/CSS/图片）、DOM 渲染这三件事，推迟到首次进入视口或满足某条件时才触发。
关键判断在于：你得自己监听 IntersectionObserver 或用 loading="lazy"（仅对 <img> 和 <iframe> 有效），自定义元素没这个内置行为。
如何让自定义元素在进入视口时才初始化？
核心是把初始化逻辑从 constructor 或 connectedCallback 移到观察回调里，并避免重复执行：
-
constructor只做最小初始化（如创建 shadowRoot、设默认属性），不要 fetch 资源、不渲染内容、不挂事件监听器 - 在
connectedCallback中创建IntersectionObserver实例，监听自身 - 观察回调中调用一次
this.loadAndRender()，然后unobserve(this) - 用私有属性如
this._loaded = false防止多次触发
class LazyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._loaded = false;
}
<p>connectedCallback() {
if (this._loaded) return;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !this._loaded) {
this.loadAndRender();
observer.unobserve(this);
}
});
observer.observe(this);
}</p><p>async loadAndRender() {
this._loaded = true;
const html = await (await fetch('/card-template.html')).text();
this.shadowRoot.innerHTML = html;
}
}
customElements.define('lazy-card', LazyCard);</p>为什么不能在 constructor 里 fetch 模板？
因为 constructor 在元素被解析时立即执行（哪怕还没插入 DOM），此时可能：
立即学习“前端免费学习笔记（深入）”；
- 页面还在加载，
fetch提前占带宽 - 元素被克隆或暂存（如 SSR 后 hydrate 前），导致无效请求
- 多个同类型元素同时发起请求，缺乏节流或缓存控制
更稳妥的做法是：
- 把模板提取为静态
<template id="lazy-card-tpl">，首次用时克隆 - 或用
import('./card.js')动态导入组件逻辑，配合customElements.whenDefined() - 若必须远程加载 HTML，加一层内存缓存：
if (window.__CARD_TPL) {...} else { ... }
和 loading="lazy" 混用要注意什么？
loading="lazy" 对自定义元素完全无效——它只作用于内置可替换元素（<img>, <iframe>）。但你可以把它用在自定义元素内部：
- 在 shadowRoot 里放
<img src="..." loading="lazy">，这是有效的 - 不要给自定义元素本身写
loading="lazy"，浏览器会忽略 - 如果组件内含大量图片，建议统一用
IntersectionObserver+decode()控制解码时机，避免滚动卡顿
真正容易被忽略的是：自定义元素的懒加载逻辑必须和 SSR/Hydration 兼容。服务端渲染时，若提前吐出完整 DOM，客户端再执行懒加载逻辑，就可能出现内容闪跳或重复渲染。解决方案通常是加一个 data-hydrated 属性，在 connectedCallback 里先检查是否已 hydrate，再决定是否启动 observer。
