web-component 相关问题

如何在脚本类型=“模块”中获取ownerDocument？文本 let owner = document.currentScript.ownerDocument // 是 nu...</desc> <question vote="6"> <p>如何在脚本 type="module" 中获取 ownerDocument？</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><template> text </template> <script type="module"> let owner = document.currentScript.ownerDocument // is null // But i need get <template> let tpl = owner.querySelector('template') </script></code></pre> </div> </div> <p></p> </question> <answer tick="true" vote="6"> <p>规范明确指出，在使用 <pre><code><script type="module"></code></pre> 时， <pre><code>document.currentScript</code></pre> 属性在执行期间设置为 <pre><code>null</code></pre>。 <a href="https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model" rel="noreferrer">请参阅“执行脚本块”下的规范</a>.</p> <p>如果使用 <pre><code>src</code></pre> 属性，这当然是显而易见的。源无法知道它将被脚本标记而不是导入语句（或两者）调用。内联模块时总是有一个脚本标签，但我猜他们想让体验保持一致。</p> <p>如果您的文档实际上是 <pre><code>window.document</code></pre> 仍然可以作为全局文件使用。否则，如果您仍然希望将脚本作为模块加载，则有两种选择：</p> <ul> <li><p>不是最漂亮的；在模块上方创建一个全局并存储模板。</p> <pre><code><script type="text/javascript"> window.myTemplates = ((ns) => { const owner = window.document.currentScript.ownerDocument; ns.fancyButton = owner.querySelector("template"); return ns; })(window.myTemplates || {}); </script> <script type="module"> const tpl = window.myTemplates.fancyButton; // ... </script> </code></pre></li> <li><p>不要将模板写成 HTML 模板，而是写成 ES/JS 模板。您的编辑器可能不支持突出显示文字 HTML，标签的 linting 是一个问题。</p> <pre><code><script type="module"> const tpl = window.document.createElement("template"); tpl.innerHTML = ` <strong>example</strong> <span style="background-color: rgba(127,127,127,0.6);">text</span> `; // ... </script> </code></pre></li> </ul> </answer> <answer tick="false" vote="1"> <p>我昨天遇到了同样的问题，花了几个小时试图解决这个问题，我想我可能会使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import" rel="nofollow noreferrer">dynamic import</a> 有更好的解决方案。</p> <p>诀窍是创建一个不是这样的模块的加载器脚本：</p> <pre><code><script src="loader.js"></script> </code></pre> <p>在 loader.js 中：</p> <pre><code>var ownerDocument = document.currentScript.ownerDocument; import('module.js').then((module) => { module.main(ownerDocument); }); </code></pre> <p>你的模块：</p> <pre><code>function main(ownerDocument){ console.log('Hello from the module!'); console.log(ownerDocument); } export {main}; </code></pre> <p>希望对您有所帮助！</p> </answer> </body></html>

html ecmascript-6 web-component es6-modules

回答 0 投票 0

在 web 组件中导入很棒的字体

这是我的标题组件：这是我的标题组件： <header class="header"> <div class="icon-container"> <ul> <li class="list-item"><i class="fa-regular fa-bell"></i></li> <li class="list-item"><i class="fa-solid fa-gear"></i></li> <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li> </ul> </div> </header> 当我在 index.html 文件中的结束 body 标记之前导入 font-awesome 时，此代码可以显示 fontawesome 中的图标。 <script src="https://kit.fontawesome.com/my-id.js"crossorigin="anonymous"></script> 不过，现在学的是web components。我为我的标题创建了一个 header.js 文件。 const template = document.createElement("template"); template.innerHTML = ` <div class="icon-container"> <ul> <li class="list-item"><i class="fa-regular fa-bell"></i></li> <li class="list-item"><i class="fa-solid fa-gear"></i></li> <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li> </ul> </div> class header extends HTMLElement { constructor() { super(); // Create a shadow root this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } window.customElements.define("header-section", header); 现在html的另一部分还在渲染，但是图标消失了，请问怎么解决呢？由于您的 Web 组件中未加载字体超棒的图标字体，因此未显示图标。要解决这个问题，您可以使用模板中的链接标签在 Web 组件中加载超棒的字体。修改模板的方法如下： const template = document.createElement("template"); template.innerHTML = ` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-jkihXtPklFJy8q3rnoEMBstczhBwFwO48lEQ7EDKlA5JX7xu5Q0NVg7lLeK/cHhV7hly0iygDRNyo6N88U6B9g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="icon-container"> <ul> <li class="list-item"><i class="fa-regular fa-bell"></i></li> <li class="list-item"><i class="fa-solid fa-gear"></i></li> <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li> </ul> </div>`; 要在 shadowDOM 中使用，您需要在 shadowDOM 和 globalDOM 中加载 CSS。让你的组件检查链接是否存在于 globalDOM 中，如果不; Web 组件添加 href customElements.define('my-fa-element', class extends HTMLElement { constructor() { let href = "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"; super().attachShadow({mode:'open'}) .innerHTML = `<style>@import url('${href}')</style>`+ [`check`,`square-check`,`circle-check`,`gear`] .map(icon=>`fa-${icon}: <i class="fa fa-${icon}"></i><br>`).join(""); if (!document.querySelector(`link[href="${href}"]`)) { document.head.append( Object.assign(document.createElement("link"), { rel: "stylesheet", href })) }; } }); <my-fa-element></my-fa-element>

javascript html css font-awesome web-component

回答 2 投票 0

如何将包含插槽的 LIT Web 组件渲染到文档正文中？

如何在使用 createRenderRoot 渲染 document.body 中的组件并使用插槽时保持 Shadow DOM 行为？在我当前的实现中，我使用 createRenderRoot 来设置位置...

javascript web-component lit

回答 1 投票 0

如何在 vanilla js web 组件中添加内部方法？

有一个任务 - 将一段可重用的代码插入到普通的 JS 组件中。类平面扩展 HTMLElement { 构造函数（）{ 极好的（）; } connectedCallback() { 如果 (!this.rend...

javascript web-component

回答 1 投票 0

lit 元素 CDN 汇总包文件：从外部 jsp 文件访问 cdn 包文件中包含的功能

我使用 rollup.config.js 创建了一个简单的 lit 元素包文件。此捆绑文件上传到 Netstorage 中。这就是我的 lit 元素的样子：从 "lit/

web-component cdn rollupjs lit

回答 1 投票 0

如何在 WebComponent 中显示子元素？

我正在尝试将 React 组件重建为 WebComponent 以消除对 React 的依赖。我想要一个在 HTML 中看起来像这样的 WebComponent：你好，世界我正在尝试将 React 组件重建为 WebComponent 以消除对 React 的依赖。我想要一个在 HTML 中看起来像这样的 WebComponent： <editable-h1>Hello, world</editable-h1> 它应该像这样渲染： <span> <h1>Hello, world</h1> <button onClick=this.onEdit>Edit</button> </span> 如果我点击编辑按钮，我想让它呈现如下： <form> <input type='text' value='Hello, world'></input> <button onClick=this.onSave>Save</button> </form> 单击保存按钮通过 API 调用将更改保存到数据库，并将渲染返回到原始渲染（但带有编辑后的文本）。我有信心我可以处理切换渲染和进行 API 调用，但我感到困惑的是如何从初始 WebComponent 中获取子元素文本“Hello，world”以进行渲染。 connectedCallback 触发开始标签<editable-h1> 所以你的Hello World还没有被解析要等到解析完成，请使用setTimeout 注意：所有为您提供 parsedCallback 的工具和库都会在幕后执行类似的技巧，使用 requestAnimationFrame 或 MutationObserver（以及更多代码行）。如果您认为单行setTimeout是hack；或者你不想用 setTimeout 松开那些 3 milliseconds，查看 Andrea Giammarchi 他的 html-parsed-element 代码（这当然需要时间来加载和解析。并增加了依赖性和代码复杂性）跟随 WC 大师，这个讨论一直在继续：当孩子改变或解析器完成解析孩子时需要回调 https://github.com/WICG/webcomponents/issues/809 所有方法归结为相同的：等到 EventLoop 为空事件循环到底是什么鬼？ https://www.youtube.com/watch?v=8aGhZQkoFbQ customElements.define("editable-h1", class extends HTMLElement { connectedCallback() { setTimeout(() => { this.innerHTML = `<span> <h1>Hello, world</h1> <button>Edit</button> </span>`; this.h1 = this.querySelector("h1"); this.button = this.querySelector("button"); this.button.onclick = (evt) => this.onEdit(evt); }); } onEdit(evt) { if (this.h1.isContentEditable) { this.button.innerHTML = "edit"; this.h1.contentEditable = false; } else { this.button.innerHTML = "save"; this.h1.contentEditable = true; this.h1.focus(); } } }); <editable-h1>Hello, world</editable-h1>

javascript html web-component

回答 1 投票 0

从外部 .js 导出的常量将 JSON 导入 index.html

我确定这很容易解决。我正在尝试使用外部 .js 文件来存储作为字符串常量存储的 JSON 对象列表（请参阅下面的 form-json.js）。这些 JSON 对象应该能够被...

javascript json web-component

回答 1 投票 0

如何用 jest 测试自定义 web 组件？

我想测试一些自定义的 Web 组件并使用 jest.js 作为测试运行器（由于它支持 ES6）。 Chromium 支持如下命令 window.customElements.define('我的自定义元素',

unit-testing jestjs puppeteer web-component

回答 5 投票 0

web-component 相关问题

最新问题