Question

使用Custom Elements利用Shadow DOM时，注入第三方脚本和Invisible reCAPTCHA等需要脚本的元素的官方方法是什么：

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

是否要引用<button>等HTML元素并呈现reCAPTCHA？

shadowRoot似乎没有像head这样的内容，是否应该将脚本添加到创建的template的{{1}}？或者是innerHTML通过<script>中的appendChild附加到shadowRoot？在Shadow DOM中使用第三方库的官方方法是什么？由于Shadow DOM，在包含渲染的自定义元素的页面上加载脚本似乎不会触发渲染。

connectedCallback()

感谢您提供任何指导。

Answer 1

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

但是，对于reCaptcha，解决方法是在普通DOM中公开<button>，并通过<slot>元素将其注入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>`
        }
    })

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

1 个答案: