html 子元素如何访问自定义Web组件类函数和变量？

rmbxnbpk 于 2023-11-15 发布在其他

关注(0)|答案(2)|浏览(180)

在使用<template>和<slot>标记定义的自定义组件中，子元素可以获取自定义组件的父元素，然后使用此元素引用访问类定义的变量和函数。

但是，子元素如何知道哪个元素是自定义组件？*

模板本身包含在一个影子DOM中。当在页面上呈现一个自定义组件时，这个影子DOM会被克隆并附加到自定义组件中作为其宿主。
然而，插入到自定义组件中的元素似乎无法告诉它所连接的节点树来自克隆的影子DOM节点，并且无法告诉当前DOM树中的哪个元素是顶级自定义组件，除非它迭代每个parentNode以检查它们是否有shadowRoot。
让自定义组件内部的子元素访问自定义组件的类变量和函数的方法是什么？

customElements.define("my-comp", class extends HTMLElement {
  creationTimestamp;
  constructor() {
    super();
    let template = document.getElementById('my-template');
    let templateContent = template.content;
    const shadowRoot = this.attachShadow({
      mode: 'open'
    });
    shadowRoot.appendChild(templateContent.cloneNode(true));
    this.creationTimestamp = Date.now();
  }
})

个字符

Html

来源：https://stackoverflow.com/questions/71486850/how-does-a-child-element-access-custom-web-component-class-functions-and-vars

2条答案

按热度按时间

bz4sfanl1#

有几个非常简单的规则来解耦Web组件：

父到子：单向数据绑定或HTML5 attributes用于传递数据并调用child.func()执行操作。
孩子对父母：子级触发一个事件。父级监听该事件。由于事件冒泡，您可以让任意数量的父级不需要额外的努力就可以拾取该事件。

这个模式也被标准的web组件使用（input，textbox等）。它也允许简单的测试，因为你不必模仿父组件。
这是Polymer library所推荐的模式，它是WebComponents的 Package 器。不幸的是，我找不到描述这种模式的具体文章。
x1c 0d1x的数据
在下面的例子中，父进程监听来自子进程的事件，并调用自身的函数来影响它的状态，或者调用子进程的函数来让它们做一些事情。

的
这是一个干净的方式来确保有明确的，Separation of Concerns。孩子做自己的事情;父母可以指示它做什么，甚至对它的行为做出React。相反，孩子 * 从不 * 指示父母，甚至不知道它。