如何将jquery嵌入到webpack中的自定义元素中，并在web组件中访问它。 我正在使用materialize

Question

我使用materialize，我使用的一些materialize组件需要jquery，但是当我把它放在模板中或者直接放在渲染函数this.innerHtml中时，脚本实际上是无法读取的，也无法工作。

const template = document.createElement('template');
template.innerHTML = 
`
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        nav {
            position: absolute;
            box-shadow: none;
            transition: 0.5s;
        }
    </style>
    <ul class="sidenav white lighten-2" id="mobile-nav">
        <li><a href="#banner">Home</a></li>
        <li><a href="#info">Info</a></li>
        <li><a href="#data">Data</a></li>
    </ul>   
    <div class="navbar-fixed">
        <nav class="transparent">
            <div class="container">
                <div class="nav-wrapper transparent">
                    <a href="#" class="sidenav-trigger" data-target="mobile-nav">
                        <i class="material-icons">menu</i>
                    </a>
                    <ul class="right hide-on-med-and-down transparent">
                        <li><a href="#banner">Home</a></li>
                        <li><a href="#info">Info</a></li>
                        <li><a href="#data">Data</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>


    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script>

        $(document).ready(function(){
            $('.sidenav').sidenav();
            $(window).scroll(function(){
                if($(window).scrollTop()>400){
                    $('nav').removeClass('transparent');
                    $('nav').addClass('red darken-4');
                }else{
                    $('nav').removeClass('red darken-4');
                    $('nav').addClass('transparent');
                }
            });
        });    

    </script>
`


class AppBar extends HTMLElement {

    constructor() {
        super();
        this.attachShadow({mode : "open"});
        var self = this;

        
        this.render();
        var sidenavs = this.shadowRoot.querySelectorAll('.sidenav')
            for (var i = 0; i < sidenavs.length; i++){
                M.Sidenav.init(sidenavs[i]);
        }
    }


    render() {
        this.shadowRoot.appendChild(template.content.cloneNode(true));        
    }

    

    connectedCallback() {

        
        // this.shadowRoot.addEventListener('DOMContentLoaded', function() {
        //     var elems = this.shadowRoot.querySelectorAll('.sidenav');
        //     var instances = M.Sidenav.init(elems, options);
        // });
        // $(document).ready(function(){
        //     $('.sidenav').shadowRoot().sidenav();
        //     $(window).scroll(function(){
        //         if($(window).scrollTop()>400){
        //             $('nav').removeClass('transparent');
        //             $('nav').addClass('red darken-4');
        //         }else{
        //             $('nav').removeClass('red darken-4');
        //             $('nav').addClass('transparent');
        //         }
        //     });
        // });    
    }

}

customElements.define('app-bar', AppBar);

• 模板 1
• 我使用jquery和自定义元素创建类的代码模板。2
• 我也在这个功能中试过，但也没有用。3

Answer 1

目前materialize不支持webpack的jquery......你应该用vannila js来代替jquery......你可以看看这个问题，以备将来解决。https:/github.comDogfalomaterializeissues5026。

Answer 2

好了，这是文档的问题，错误的未声明的选项变量。

var instances = M.Sidenav.init(elems, options);

改为：

var instances = M.Sidenav.init(elems);

另外，jQuery不再是Materializecss的依赖，所以你可以全程使用vanilla JS。