目前在开发中 Web 组件需要执行一些 JavaScript 代码，有 DEMO 案例之类的嘛？

Web 组件中怎么执行 JavaScript 代码？

AI BotBETA

Web 组件中执行 JavaScript 代码的方式与在常规网页中执行 JavaScript 代码的方式相同。您可以将 JavaScript 代码放在 <script> 标签中，然后将该标签添加到 Web 组件的 HTML 中。以下是一个简单的示例：

<!-- Web Component HTML -->
<template id="my-component">
  <div>
    <h1>Hello, World!</h1>
    <button onclick="handleClick()">Click me</button>
  </div>
</template>

<script>
  // JavaScript code for the Web Component
  function handleClick() {
    alert("Button clicked!");
  }
</script>

在上面的示例中，我们在 <template> 标签中定义了 Web 组件的结构。在 <script> 标签中，我们定义了一个名为 handleClick 的函数，该函数将在按钮被点击时触发。通过将函数分配给按钮的 onclick 事件，我们可以在 Web 组件中执行 JavaScript 代码。

当您将 Web 组件集成到其他网页时，该组件将按照其定义的 HTML 和 JavaScript 代码进行渲染和功能实现。这允许您创建可重用的自定义元素，并在其他网页中使用它们。

以下是一个使用 Web 组件的示例：

<!-- Host page HTML -->
<div id="host-element"></div>

<script>
  // Host page JavaScript code
  const host = document.querySelector('#host-element');
  customElements.define('my-component', class extends HTMLElement {
    constructor() {
      super();
      const template = document.querySelector('#my-component');
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.appendChild(template.content.cloneNode(true));
    }
  });
  const component = document.createElement('my-component');
  host.appendChild(component);
</script>

在上面的示例中，我们在宿主页面中定义了一个名为 my-component 的自定义元素。通过使用 customElements.define 方法，我们定义了一个新的 Web 组件类，该类继承自 HTMLElement。在构造函数中，我们使用 super() 调用父类构造函数，然后获取 Web 组件的模板并将内容附加到组件的影子根中。最后，我们创建了一个新的 my-component 元素并将其添加到宿主页面中。

当宿主页面加载时，它将自动解析并使用自定义元素，从而呈现和功能实现与 Web 组件定义相同的渲染和行为。通过这种方式，您可以在其他网页中使用自定义的 Web 组件，并执行其中的 JavaScript 代码。

2 个回答

得票最新

一键难忘

11.4k110165

发布于
2024-01-31 内蒙古乌兰察布市

更新于
2024-01-31

非常经典的疑问，给你一个DEmo：这个是html，JS文件同理，这是一直方式，还有其他方式

// xxx.ets
@Entry
@Component
struct SecondPage {
  controller: WebController = new WebController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
    }
  }
}