Fatal编程技术网
  • javascript/
  • Javascript 使用ShadowDOM for CSS和Bootstrap 4构建自定义元素

Javascript 使用ShadowDOM for CSS和Bootstrap 4构建自定义元素

javascript twitter-bootstrap

Javascript 使用ShadowDOM for CSS和Bootstrap 4构建自定义元素,javascript,twitter-bootstrap,shadow-dom,custom-element,Javascript,Twitter Bootstrap,Shadow Dom,Custom Element,我正在尝试开发一个使用Bootstrap4Popover的自定义组件。基本上，我想创建一个带有自定义CSS的浮动按钮，该按钮不受页面CSS的影响，并确保当您单击按钮时，会显示引导弹出窗口（也是自定义的）。 我读到，它在某种程度上对我很有用。。。 我怎样才能继续 index.html ) 如果您询问如何在组件中使用引导，那么答案就是在自定义元素的shadowdom中重复指向引导样式和脚本的链接。调用将被缓存，因此没有额外的加载，您的影子DOM现在将可以访问引导 如果不希望父元素影响自定义元素，则还

我正在尝试开发一个使用Bootstrap4Popover的自定义组件。基本上，我想创建一个带有自定义CSS的浮动按钮，该按钮不受页面CSS的影响，并确保当您单击按钮时，会显示引导弹出窗口（也是自定义的）。 我读到，它在某种程度上对我很有用。。。 我怎样才能继续

index.html

)

如果您询问如何在组件中使用引导，那么答案就是在自定义元素的shadowdom中重复指向引导样式和脚本的链接。调用将被缓存，因此没有额外的加载，您的影子DOM现在将可以访问引导

如果不希望父元素影响自定义元素，则还必须将shadowdom模式更改为closed 
var shadow=this.attachShadow（{mode:'closed'}）
如果您询问如何在组件中使用引导，答案是在自定义元素的阴影DOM中重复指向引导样式和脚本的链接。调用将被缓存，因此没有额外的加载，您的影子DOM现在将可以访问引导

如果不希望父元素影响自定义元素，则还必须将shadowdom模式更改为closed

var shadow=this.attachShadow（{mode:'closed'}）
谢谢，我会尝试重复链接，但我有一个疑问：尽管有jQuery，引导脚本在shadow DOM中工作吗？如果它需要jQuery，也只需重复jQuery链接。将引导链接添加到shadow元素的绝妙技巧，非常有效！谢谢，我会尝试重复链接，但我有一个疑问：尽管有jQuery，引导脚本在shadowdom中工作吗？如果需要jQuery，也可以重复jQuery链接。将引导链接添加到shadow元素的绝妙技巧，效果非常好！

<!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>



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 )