能否基于Deno在不修改组件代码的前提下实现Web Components服务端渲染？

完全可以在不修改组件代码的前提下，在服务端生成Web Component对应的HTML字符串。核心思路是在服务端模拟浏览器的DOM环境，让组件代码能正常执行并渲染，再提取对应的HTML内容。

实现方案 #

我们可以用jsdom来模拟浏览器DOM环境，搭配Node.js服务框架（比如Express）实现需求：

1. 安装依赖 #

首先安装所需的包：

npm install express jsdom

2. 服务端代码实现 #

假设你的组件文件是component.js（即你提供的代码），服务端代码示例如下：

import express from 'express';
import { JSDOM } from 'jsdom';
import fs from 'fs/promises';

const app = express();

// 处理根路径请求
app.get('/', async (req, res) => {
  const isNavigateRequest = req.headers['sec-fetch-mode'] === 'navigate';

  // 如果不是导航请求，直接返回组件本身
  if (!isNavigateRequest) {
    const componentCode = await fs.readFile('./component.js', 'utf8');
    res.setHeader('Content-Type', 'application/javascript');
    res.send(componentCode);
    return;
  }

  // 模拟浏览器DOM环境
  const dom = new JSDOM('<!DOCTYPE html><body></body>');
  // 挂载必要的全局对象，让组件代码能正常执行
  globalThis.window = dom.window;
  globalThis.document = dom.window.document;
  globalThis.HTMLElement = dom.window.HTMLElement;

  // 加载并定义自定义组件
  const Component = (await import('./component.js')).default;
  dom.window.customElements.define('my-component', Component);

  // 创建组件实例并挂载到DOM
  const componentElement = dom.window.document.createElement('my-component');
  dom.window.document.body.appendChild(componentElement);

  // 提取Shadow DOM中的HTML内容
  const shadowHtml = componentElement.shadowRoot.innerHTML;

  // 返回包含渲染内容的完整HTML，同时带上客户端hydrate脚本
  res.send(`<!DOCTYPE html>
<html>
<body>
<my-component>${shadowHtml}</my-component>
<script type="module">
import Component from '/component.js';
customElements.define('my-component', Component);
</script>
</body>
</html>`);

  // 清理全局对象，避免内存泄漏和请求污染
  delete globalThis.window;
  delete globalThis.document;
  delete globalThis.HTMLElement;
});

// 启动服务
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

关键细节说明 #

• DOM环境模拟：jsdom提供了浏览器DOM的模拟实现，让组件的HTMLElement继承、attachShadow等API能正常工作。
• 全局对象挂载：将jsdom的window、document等挂载到Node.js的globalThis上，确保组件代码不会因为找不到这些全局对象而报错。
• 客户端Hydrate：返回的HTML中加入了组件的加载脚本，保证客户端能重新注册组件，维持后续的交互能力。
• 请求头判断：通过sec-fetch-mode请求头区分导航请求和资源请求，分别返回渲染后的HTML或组件源码。

注意事项 #

• 对于包含异步渲染逻辑的复杂组件，可能需要等待组件的connectedCallback或自定义生命周期钩子执行完成后再提取HTML。
• jsdom对Web Components的支持存在部分局限性，若遇到特殊API不兼容的情况，可以考虑补充对应的polyfill或使用更完善的服务端渲染方案（如Lit的服务端渲染工具）。

内容的提问来源于stack exchange，提问作者Товарищ Понечка