如何将 jQuery 嵌入到 Webpack 中的自定义元素并在 Web 组件中访问它。我正在使用具体化

Question

我使用实体化，我使用的一些实体化组件需要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

目前，realize不支持针对webpack的jquery。。您假设使用vannila-js而不是jquery。。您可以看到这些问题以获得前瞻性解决方案https://github.com/Dogfalo/materialize/issues/5026

Answer 2

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

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

更改为：

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

此外，jQuery不再是Materializecss的依赖，因此您可以全程使用vanillaJS。