0

我目前正在研究使用 Litelements 的 Web 组件：在 Web 组件中，您可以通过将 mode 属性定义为“打开”或“关闭”来更改 shadowdom 的工作方式。像这样在没有 LitElements 的 vanilla Javascript 中：

Javascript：

var shadow = this.attachShadow({mode: 'open'});

来自：https ://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

现在在带有 Typescript 的 Litelements 中，可以这样实现：

打字稿：

export class MyWebcomponents extends LitElement {
  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
}

来自：https ://lit.dev/docs/components/shadow-dom/

自定义渲染根的最简单方法是设置 shadowRootOptions 静态属性。createRenderRoot 的默认实现在创建组件的影子根时将 shadowRootOptions 作为选项参数传递给 attachShadow。它可以设置为自定义 ShadowRootInit 字典中允许的任何选项，例如 mode 和 delegatesFocus。

老实说，我无法让它工作，我尝试了很多东西，比如：

打字稿：

static shadowRootOptions = {...{mode: 'open'}, delegatesFocus: true};

上面的尝试给了我一个错误，我没有正确扩展类 LitElement。

打字稿：

static shadowRootOptions = {mode: 'open', delegatesFocus: true};

给我愚蠢的错误消息，只有 VS Code 和 Typescript 会产生错误的类扩展。

打字稿：

static shadowRootOptions = {{mode: 'open'}, delegatesFocus: true};

上面的尝试给了我一条消息，告诉我我没有正确扩展并且还抱怨语法。

然后我试图找出 LitElement.shadowRootOptions 是什么类型并提供类似的东西，但后来我陷入了一个提出更多问题的兔子洞，发现这个简单的 oneliner 更加晦涩难懂。（是的，我确实阅读了传播语法，我想我理解了，我也根据传播语法阅读了这篇文章： 我不了解对象内部的传播语法 ， 它是传播“语法”还是传播“运算符” ? )

因此，为了使这个问题保持简单：

任何人都可以指出我必须如何编写语法的正确方向，所以这确实有效吗？我只是希望能够按照设置的方式将模式设置为打开或关闭。

非常感谢！

问候

亚历克斯

4

1 回答 1

0

默认情况下，lit 元素在 mode 中起作用open。所以customLitElement.shadowRoot返回一个影子根。

如果要在关闭模式下运行它，请实现此方法：

 createRenderRoot() {
    return this;
 } 


<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class ClosedEl extends LitElement {
  
 createRenderRoot() {
    return this;
 } 

 render() {
  return html`
      <h1>Example Closed</h1>
  `;
 }
}

class OpenedEl extends LitElement {

 render() {
  return html`
      <h1>Example Opened</h1>
  `;
 }
}

customElements.define("my-closed", ClosedEl);
customElements.define("my-opened", OpenedEl);

console.log(`ShadowRoot of closed El: ${document.getElementById('closed').shadowRoot}`);
console.log(`ShadowRoot of opened El: ${document.getElementById('opened').shadowRoot}`);

console.log(`Access to opened El: ${document.getElementById('opened').shadowRoot.innerHTML}`);
</script>
<my-closed id="closed"></my-closed>
<my-opened id="opened"></my-opened>

于 2022-01-20T12:58:39.833 回答