从dist中从Map的源文件导入模块时，Web组件的TypeScript继承中断

7uzetpgm 于 2023-04-22 发布在 TypeScript

关注(0)|答案(1)|浏览(96)

我试图找出如何捆绑我的JS生成的代码从TS文件，我面临着一些问题。我有两个组件，其中一个是扩展另一个。
让我们保持简单。
tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "moduleResolution": "node",
    "sourceMap": true,
    "baseUrl": "./public",
    "outDir": "dist",
        "paths": {
          "@js/*": ["../dist/public/javascripts/*"]
        }
  }
}

仅父组件：

const template = document.createElement('template');
template.innerHTML =
    `
    <style>
    </style>
    <h1>Parent</h1>
    `

export class Parent extends HTMLElement {

    constructor() {
        super();

        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

}

window.customElements.define('my-parent', Parent)

和子组件：

import {Parent} from '@js/Parent.js' <- does not work
import {Parent} from './Parent.js' <- works fine

const template = document.createElement('template');
template.innerHTML =
    `
    <style>
    </style>
    <h1>Child</h1>
    `

class Child extends Parent{

    formId = 'adventureNpcs';
    constructor() {
        super();

        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

}

window.customElements.define('my-child', Child)

从Map文件（从dist生成的源代码）导入模块后，似乎再也看不到它们之间的继承关系了，结果是：

Property 'attachShadow' does not exist on type 'Child'.

为什么以这种方式导入模块时会识别子模块：

import {Parent} from './Parent.js'

这不管用吗

import {Parent} from '@js/Parent.js'

我错过什么了吗？做错什么了吗？

typescript

来源：https://stackoverflow.com/questions/76067553/typescript-inheritance-of-web-components-breaks-while-importing-modules-from-map

1条答案

按热度按时间

sr4lhrrt1#

与依赖文件位置***和***同步加载不同，您可以依赖CustomElementsRegistry
您可以将其重构为：

不需要导出，因为在CustomElementsRegisrty中定义了（或尚未定义）<my-parent>
<my-child>将被定义***当***<my-parent>已被定义
您仍然可以为组件保留单独的文件，但可以按所需的任何顺序加载它们
PS使用模板来设置innerHTML是臃肿的代码，并且只会对数千个元素产生性能增益。所有显示此内容的旧博客都应该被烧毁。所有未显示super()的博客也是如此。

customElements.whenDefined('my-parent').then(() => {
  customElements.define('my-child', class extends customElements.get('my-parent') {
   connectedCallback(){
    this.innerHTML += ` inside <span part="title">${this.nodeName}</span>`;
   }
  })
});

document.body.onclick = () => {
  customElements.define('my-parent', class extends HTMLElement {
    constructor() {
      super().attachShadow({mode:'open'})
             .innerHTML = `<h5 part="title">${this.nodeName}</h5><slot></slot>`
    }
  })
}

body{ font: 16px Arial } 

*:not(:defined){
  background:red;
}

*::part(title){
  /* part does not style content in NESTED shadowRoots */
  background:green;
  color:gold;
}

<h2>Cick me to create &lt;my-parent></h2>

<my-parent><my-child>FOO</my-child></my-parent>

赞(0）回复(0）举报 2023-04-22

我来回答

从dist中从Map的源文件导入模块时，Web组件的TypeScript继承中断

1条答案

相关问题

热门标签

最新问答