自定义元素 Web 组件 Shadow DOM 供应商脚本/元素

当与自定义元素 https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements那个杠杆影子 DOM https://dom.spec.whatwg.org/#shadow-trees，注入 3rd 方脚本和元素的官方方法是什么，例如隐形验证码 https://developers.google.com/recaptcha/docs/invisible需要这样的脚本：

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

对于 HTML 元素，例如<button>进行引导并呈现 reCAPTCHA？

shadowRoot似乎没有类似的东西head，该脚本是否应该添加到创建的template's innerHTML？或者是一个<script>通过以下方式附加到 ShadowRootappendChild in 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) {
    ...
  }
}

感谢您提供的任何指导。

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

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

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>`
        }
    })