如何在Svelte中绑定Electron webview元素的src属性？

Svelte的双向绑定bind:语法仅默认支持标准HTML元素的属性，Electron的<webview>属于自定义内置元素，Svelte并未预设它的src属性支持双向绑定，因此直接使用bind:src={url}会触发“src不是有效绑定项”的错误。

解决方案： #

• 单向绑定（仅从变量同步到webview）
  如果只需要将Svelte变量的值传递给webview的src，直接使用单向绑定即可，不需要bind:前缀：

  <script>
      let url = "";
  </script>
  
  <webview src={url}></webview>
  

• 双向绑定（同步webview导航后的URL到变量）
  若需要在webview导航后同步更新Svelte变量，需手动监听webview的did-navigate事件，并更新变量值：

  <script>
      let url = "https://example.com";
  
      function updateUrl(event) {
          url = event.url;
      }
  </script>
  
  <webview src={url} on:did-navigate={updateUrl}></webview>
  

注意：Electron的<webview>仅能在Electron主进程加载的渲染进程中使用，Svelte REPL的浏览器环境无法测试该功能，需在本地Electron项目中验证。

内容的提问来源于stack exchange，提问作者notAperson535