从Web组件继承时如何填充插槽？ 长答案：

编程问答 2022-05-22

问题描述

假设我有一个像

这样的对话框组件 
class ModalDialog extends HTMLElement {
    constructor(){
        super()
        this._shadow = this.attachShadow({mode: 'closed'})
    }

    connectedCallback(){
        const template = `
            <style>
            ... lots of style that doesn't matter to this question ...
            </style>
            <div class="dialog">
                <div class="dialog-content">
                    <div class="dialog-header">
                        <slot name="header"></slot>
                        <span class="close">&times;</span>
                    </div>
                    <div class="dialog-body"><slot name="body"></slot></div>
                    <div class="dialog-footer"><slot name="footer"></slot></div>
                </div>
            </div>
        `

        this._shadow.innerHTML = template
        this._shadow.querySelector('.close').onclick = () => this.hide()
        const dialog = this._shadow.querySelector('.dialog')
        dialog.onclick = evt => {
            if(evt.target == dialog){ //only if clicking on the overlay
                this.hide()
            }
        }
        this.hide()
    }

    show() {
        this.style.display = 'block'
    }

    hide(){
        this.style.display = 'none'
    }
}

window.customElements.define('modal-dialog',ModalDialog)

现在假设我想创建专用对话框......例如允许用户选择图像。

我可以这样做

import {} from './modal-dialog.js'

class ImageSelector extends HTMLElement {
    constructor(){
        super()
        this._shadow = this.attachShadow({mode: 'closed'})
    }

    connectedCallback(){
        const template = `
            <style>
                ... more style that doesn't matter ...
            </style>
            <modal-dialog>
                <div slot="header"><h3>Select Image</h3></div>
                <div slot="body">
                     ... pretend there's some fancy image selection stuff here ...
                </div>
            </modal-dialog>
        `
        this._shadow.innerHTML = template
    }

    show(){
        this._shadow.querySelector('modal-dialog').show()
    }

    hide(){
        this._shadow.querySelector('modal-dialog').hide()
    }
}
window.customElements.define('image-selector',ImageSelector)

但我不喜欢那里的 show 和 hide 方法。

另一种选择是从对话框继承而不是从 HTMLElement...

import {} from './modal-dialog.js'

class ImageSelector extends customElements.get('modal-dialog'){
    constructor(){
        super()
    }

    connectedCallback(){
        ... Now what? ...
    }
}
window.customElements.define('image-selector',ImageSelector)

但如果我这样做了，我该如何填补空缺？

天真的方法当然是只使用 _shadow 并将其放入插槽的内部 html 中，但我觉得这不是可行的方法。

解决方法

TLDR;不可能同时使用继承和组合。

长答案：

您实际上是在混合两个截然不同但可供选择的概念：

  1. 继承 - 在覆盖/重载现有行为时使用
  2. 组合 - 在使用其他实体的行为并在其周围添加更多行为时使用。

您可以用一个替换另一个，一般来说，在 Web UI 编程中，组合总是优于继承，因为它提供了松散耦合。

在您的情况下，您实际上想要使用模板而不是实际覆盖它。因此，组合在这里是更好的选择。但这也意味着您实际上必须编写更多样板代码，即 show 和 hide 方法的包装器实现。

理论上，继承的发明是为了促进代码重用并避免重复代码，但与组合相比，这是一种成本。

,

来自 Harshals 的回答的好信息；这是用户代码

除非您使用 SSR，否则读取的第一个文件是 HTML 文件。

所以将模板内容放在那里，让一个通用模态 Web 组件读取模板

<template id="MODAL-DIALOG">
  <style>
    :host { display: block; background: lightgreen; padding:.5em }
    [choice]{ cursor: pointer }
  </style>
  <slot></slot>
  <button choice="yes">Yes</button>
  <button choice="no" >No</button>
</template>
<template id="MODAL-DIALOG-IMAGES">
  <style>
    :host { background: lightblue; } /* overrule base template CSS */
    img { height: 60px; }
    button { display: none; } /* hide stuff from base template */
  </style>
  <h3>Select the Framework that is not Web Components friendly</h3>
  <img choice="React" src="https://image.pngaaa.com/896/2507896-middle.png">
  <img choice="Vue" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1184px-Vue.js_Logo_2.svg.png">
  <img choice="Svelte" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png">
   <slot><!-- remove slot from BaseTemplate,then this slot works --></slot>
</template>

<modal-dialog>Standard Modal</modal-dialog>
<modal-dialog template="-IMAGES">Images Modal</modal-dialog>

<script>
  document.addEventListener("modal-dialog",(evt) => {
    alert(`You selected: ${evt.detail.getAttribute("choice")}`)
  });
  customElements.define('modal-dialog',class extends HTMLElement {
    constructor() {
      let template = (id="") => {// if docs say "use super() first" then docs are wrong
        let templ = document.getElementById(this.nodeName + id);
        if (templ) return templ.content.cloneNode(true);
        else return []; // empty content for .append
      }
      super().attachShadow({mode:"open"})
             .append( template(),template( this.getAttribute("template") ));
      this.onclick = (evt) => {
        let choice = evt.composedPath()[0].hasAttribute("choice");
        if (choice) 
          this.dispatchEvent(
            new CustomEvent("modal-dialog",{
              bubbles: true,composed: true,detail: evt.composedPath()[0]
            })
          );
       // else this.remove();   
      }
    }
    connectedCallback() {}
  });
</script>

注意事项

  • 当然你可以将 <TEMPLATES> 包裹在一个 JS 字符串中

  • 您不能在模板中添加 <script>
    好吧，你可以......但它在全局范围内运行，而不是组件范围

  • 对于更复杂的对话框和 <SLOT>，您可能需要使用代码从 Basetemplate 中删除不需要的插槽

  • 不要让它太复杂：

    • 好的组件在一些方面做得非常好。
    • 坏组件尝试做所有事情...创建另一个组件
html-templatesinheritanceinheritancejavascriptweb-component