为 CSS 和 Bootstrap 4 使用 shadow dom 构建自定义元素答案

【问题标题】：Building a custom element using shadow dom for CSS and Bootstrap 4为 CSS 和 Bootstrap 4 使用 shadow dom 构建自定义元素
【发布时间】：2020-07-01 07:58:26
【问题描述】：

我正在尝试开发一个使用 Bootstrap 4 弹出框的自定义组件。基本上，我想使用不受页面 CSS 影响的自定义 CSS 创建一个浮动按钮，并确保在单击按钮时显示 Bootstrap 弹出窗口（也是自定义的）。我读了this previous discussion，在某种程度上对我有用... 我该如何继续？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <title>fwa-button</title>
</head>
<body>

    <div class="container-fluid">
        <fwa-button></fwa-button>
    </div>


    <script src="fwa-button.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script>
        $(function () {
            $('[data-toggle="popover"]').popover({
                container: 'body',
                html: true,
                placement: 'top',
                title: '',
                content: function() {
                    let message = '<p class="h5">Ciao, come posso esserti d\'aiuto?<p>';
                    let checkbox = '<div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="customCheck1"><label class="custom-control-label" for="customCheck1">Confermi di aver preso visione della normativa vigente sul trattamento dei dati personali.</label></div>';

                    return message + checkbox;
                },
                template: '<div class="popover chatbox-popup" role="tooltip"><header class="chatbox-popup__header"><aside style="flex:3"><i class="fa fa-user-circle fa-4x chatbox-popup__avatar" aria-hidden="true"></i></aside><aside class="ml-3" style="flex:8"><h1 class="live-chat">Pinco Pallino</h1> <em>Venditore (Online)</em></aside><h3 class="popover-header"></h3></header><div class="popover-body chatbox-popup__main"></div><div class="chatbox-popup__footer"><aside style="flex:10"><textarea type="text" placeholder="Scrivi qui il tuo messaggio..." rows="3" autofocus></textarea></aside><aside style="flex:1;color:#888;text-align:center;"><i class="fa fa-paper-plane ml-3" aria-hidden="true"></i></aside></div></div>',
                sanitize: false,
            })
        })
    </script>
</body>
</html>

fwa-button.js

class FloatingWhatsAppButton extends HTMLElement {
    #container;

    constructor() {
        super();

        var shadow = this.attachShadow( { mode: 'open' } );

        this.#container = document.createElement( 'div' );
        this.#container.setAttribute( 'slot', 'bootstrap' );

        var button = document.createElement( 'button' );
        button.setAttribute( 'type', 'button' );
        button.setAttribute( 'class', 'ccwhatsapp-starter' );
        button.setAttribute( 'data-toggle', 'popover' );

        var icon = document.createElement( 'i' );
        icon.setAttribute( 'class', 'fab fa-whatsapp fa-2x' );
        icon.setAttribute( 'aria-hidden', 'true' );

        button.appendChild( icon );
        this.#container.appendChild( button );

        var slot = document.createElement( 'slot' );
        slot.setAttribute( 'name', 'bootstrap' );
        var style = document.createElement( 'style' );
        style.textContent = '.ccwhatsapp-starter {' +
                                'position: fixed; ' +
                                'bottom: 16px;' +
                                'right: 16px;' +
                                'width: 58px; ' +
                                'height: 58px; ' +
                                'color: white; ' +
                                'background-color: green; ' +
                                'background-position: center center; ' +
                                'background-repeat: no-repeat; ' + 
                                'box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.2); ' +
                                'border: 0; ' +
                                'border-radius: 50%; ' +
                                'cursor: pointer;' +
                            '} ';

        shadow.appendChild( style );
        shadow.appendChild( slot );
    }

    connectedCallback() {
        this.appendChild( this.#container );
    }
}

// Define the new element
customElements.define( 'fwa-button', FloatingWhatsAppButton )

;

【问题讨论】：

标签： javascript twitter-bootstrap shadow-dom custom-element

【解决方案1】：

如果您问如何在组件中使用 Bootstrap，答案是在自定义元素的影子 DOM 中重复指向 Bootstrap 样式和脚本的链接。调用将被缓存，因此无需额外加载，并且您的 shadow DOM 现在可以访问 Bootstrap。

如果您不希望父元素影响自定义元素，您还必须将 shadow DOM 模式更改为关闭 var shadow = this.attachShadow( { mode: 'closed' } );

【讨论】：

谢谢，我会尝试重复链接，但我有一个疑问：尽管有 jQuery，但 Bootstrap 的脚本是否可以在影子 DOM 中工作？
如果它需要 jQuery，只需重复 JQuery 链接。
将 Bootstrap 链接添加到阴影元素的绝佳技巧，就像一个魅力！