SSI 渲染 Web 组件无法使用 res.send() 和 #include virtual

如何解决SSI 渲染 Web 组件无法使用 res.send() 和 #include virtual

我在一个项目中工作，却被这件事困住了。我不知道是我遗漏了什么还是失败了

我想以这种方式使用 Express 框架呈现自定义元素：

首先，我有我以这种方式声明组件的视图文件：

render.js 来自一个组件

<my-component><!-- # include virtual="/my-path" --></my-component>

然后，在另一个文件（在另一个组件中）中，我收到了这样的请求：

server.js 来自另一个组件。

app.get('/my-path',(req,res) => {
  res.send(render())
}

其中 render() 方法返回一个 html，例如 <div>hello</div>。

并且 my-component 默认不渲染：
my-component.js

class WebComponent extends HTMLElement{

    connectedCallback() {
        console.log('connected component');
    }

}
export default WebComponent;

这里，我预期的工作流程是：

加载视图 (render.js)。
my-component 调用 /my-path 因为 
组件被 /my-path 返回的 HTML“填充”。
在客户端查看服务器渲染的 Web 组件。

但它不起作用，组件未呈现且为空。

我已经测试访问 http://localhost:XXXX/my-path 并且浏览器正确输出结果。

此外，自定义组件将消息显示到 console.log('connected component'); 中，因此组件存在并启动。

但是路径 my-path 没有被调用......为什么？我错过了什么还是我错了？也许我需要渲染 web 组件，但这不是来自服务器的 SSI 渲染？

此外，我还手动触发了服务器中的 my-path 路由以检查是否需要调用，但它也不起作用。

编辑：我要编辑以更好地解释：

我以这种方式在服务器端加载 Web 组件（或者我认为我这样做了）：

构建并创建 page.js 文件
使用 <script src="/my-path/page.js"></script> 进入布局
在 server.js 中使用：app.use('/my-path',express.static('./build'));

提前致谢。

解决方法

该组件只能在前端工作。如果它想向某个路径发出请求并将该响应用作元素的主体，那么您可以在前端执行此操作。

给你的组件一个 path 属性。这应该是从中获取数据的 URL。每当您的组件具有带有值的此属性时，它就会尝试从该路径获取数据并将其设置为 innerHTML。

<my-component path="/my-path"></my-component>

使用 observedAttributes 和 attributeChangedCallback 方法将使您能够在第一次渲染时以及每当 path 属性的值发生更改时获取新数据。

在您的页面中加载此组件。当它在前端呈现时，它将从 path 属性中的值中获取数据并将其设置为 innerHTML 值（只要请求成功）。

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['path'];
  }

  constructor() {
    super();
  }

  get path() {    
    return this.getAttribute('path');
  }

  set path(value) {
    this.setAttribute('path',value);
  }

  async fetchPath() {
    if (!this.path) {
      return;
    }

    try {
      const response = await fetch(this.path);
      const html = await response.text();
      this.innerHTML = html;
    } catch (error) {
      console.log(error)
    }
  }

  attributeChangedCallback(attrName,oldValue,newValue) {
    if (attrName === 'path') {
      this.fetchPath();
    }
  }
}

customElements.define('my-component',MyComponent);