recaptcha - 自定义元素 Web 组件影子 DOM 供应商脚本/元素

Question

使用 Custom Elements 时那个杠杆Shadow DOM ，注入(inject)第 3 方脚本和元素(例如 Invisible reCAPTCHA)的官方方法是什么？这需要这样的脚本:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>` 

用于 HTML 元素，例如 <button>被引导并呈现 reCAPTCHA？

shadowRoot似乎没有head之类的东西, 脚本是否应该添加到创建的 template的 innerHTML ？或者是 <script>通过 appendChild 附加到 shadowRoot在connectedCallback() ？在 Shadow DOM 中使用第三方库的官方方法是什么？由于 Shadow DOM，在包含呈现的自定义元素的页面上加载脚本似乎不会触发呈现。

const template = document.createElement('template');
template.innerHTML = `
    <form>
        <button class="g-recaptcha" 
            data-sitekey="your_site_key" 
            data-callback='onSubmit'>Submit</button>
    </form>
`;

class CustomElement extends HTMLElement {
  constructor() {
    super(); // always call super() first in the ctor.
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  connectedCallback() {
    ...
  }
  disconnectedCallback() {
    ...
  }
  attributeChangedCallback(attrName, oldVal, newVal) {
    ...
  }
}

感谢您提供的任何指导。

Answer 1

没有官方方法，因为解决方案取决于第 3 方库的实现。

但是，对于 reCaptcha，解决方法是公开 <button>在普通 DOM 中，并通过 <slot> 将其注入(inject) Shadow DOM 中元素。

class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( {mode: 'open'} ).innerHTML= `
            <form>
                <slot></slot>
            </form>`                
    }

    connectedCallback() {
        this.innerHTML = `                  
            <button
                class="g-recaptcha"
                data-sitekey="your_site_key"
                data-callback="onSubmit">Submit</button>`
        }
    })