Web组件是使用本机代码或第三方库创建的可重用客户端元素。
我正在使用并尝试在选择另一个手风琴时关闭打开的手风琴。但无法这样做。非常感谢任何帮助。 我正在使用 并尝试在选择另一个手风琴时关闭打开的手风琴。但无法这样做。非常感谢任何帮助。 <lion-accordion> <h3 slot="invoker"> <button>Sensory Factors</button> </h3> <div slot="content" class="lion-paragraph-container"> <p> Content A </p> </div> <h3 slot="invoker"> <button>Nutritional value</button> </h3> <div slot="content"> Content B </div> </lion-accordion> 为什么要创建对 Lit 和 Lion 的依赖？ 它几乎是一个 one-liner <details-accordion> 用于原生 <details> <summary> 代码的原生 Web 组件 免费投入ctrl-click <style> summary { font-weight: bold; cursor: pointer } details[open] { background: beige } </style> <details-accordion> <details open> <summary>Summary 1</summary> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </details> <details> <summary>Summary 2</summary> "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </details> <details> <summary>Summary 3</summary> "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </details> </details-accordion> <script> customElements.define( 'details-accordion', class extends HTMLElement { connectedCallback() { this.onclick = e => [...this.children].forEach(d => !e.ctrlKey && d.toggleAttribute("open", e.target == d)); } }); </script>
如何延迟执行 Web 组件内的代码，直到整个文档加载并准备就绪？ 我的 Web 组件需要与自身外部的元素进行交互——它将查询主体......
我正在开发实现 Angular Web 组件概念 Angular 指南的项目 现在我们只有 2 或 3 个元素将根据用户的输入动态显示。 用户完成后...
我是新使用网络组件。 我定义了一个菜单组件： 菜单组件.html： 我是网络组件的新手。 我定义了一个 MenuComponent： 菜单组件.html： <link rel="stylesheet" href="menu-component/menu-component.css"> <div class="mobile-menu"> <div></div> <div style="width: 100%;"></div> <div></div> </div> <div class="mobile-page-title"></div> <a href="index.html"> <div class="logo"> <div style="letter-spacing: .01rem; padding-right: 0.1rem;">creativ</div> <div class="logo-accent" style="font-size: 2.8rem; line-height: 2rem; align-self: flex-start;">3</div> <div class="logo-accent" style="letter-spacing: 0.1rem;">ly</div> </div> </a> <div class="menu-container"> <div class="menu-center"> <div id="home-menu" class="menu-item" style="margin-top: 0.5rem;"> <a href="index.html">home</a> </div> <div class="menu-underline"></div> </div> <div class="menu-center"> <div id="design-menu" class="menu-item first-menu"> <a href="designs.html">designs</a> </div> <div class="menu-underline"></div> </div> <div class="slide-right2 menu-center"> <div id="logos-menu" class="menu-item"> <a href="logos.html">logos</a> </div> <div class="menu-underline"></div> </div> <div class="slide-right3 menu-center"> <div id="paintings-menu" class="menu-item"> <a href="paintings.html">paintings</a> </div> <div class="menu-underline"></div> </div> <div class="slide-right4 menu-center"> <div id="bio-menu" class="menu-item"> <a href="bio.html">bio</a> </div> <div class="menu-underline"></div> </div> <div class="slide-right5 menu-center"> <div id="contacts-menu" class="menu-item"> <a href="contacts.html">contacts</a> </div> <div class="menu-underline"></div> </div> </div> 菜单组件.css： a { color: unset; text-decoration: none; cursor: unset; } .logo { width: fit-content; padding: 0 1rem; font-size: 1.8rem; display: flex; align-items: baseline; top: 2rem; position: fixed; cursor: pointer; z-index: 2000; } .logo-accent { color: var(--brand-color); font-family: var(--accent-font-family); font-style: italic; font-size: 2.37rem; } .mobile-page-title { display: none; color: var(--background-color); font-family: var(--accent-font-family); font-style: italic; font-size: 1.4rem; background-color: var(--brand-color); padding: 0.5rem 1rem 0.6rem 3rem; border-radius: 0 20px 20px 0; top: 0px; position: fixed; z-index: 2000; } .no-underline { border-bottom: 2px solid var(--brand-color); } .underline { border-bottom: 2px solid var(--complementary-color); transition: width 2s; width: 3%; } .menu-item { color: var(--background-color); font-family: var(--accent-font-family); padding-top: 1.2rem; cursor: pointer; font-style: italic; animation: 2s slide-right; } .menu-center { display: flex; flex-direction: column; width: 100%; overflow: hidden; align-items: center; } .menu-underline { height: 4px; border-top: 2px solid var(--complementary-color); box-sizing: border-box; width: 0%; transition: .5s; } .menu-item:hover + .menu-underline { width: 100%; } .mobile-menu { display: none; } .first-menu { margin-top: 0.5rem; } #home-menu { display: none; } .menu-container { width: 165px; position: fixed; top: 50%; transform: translate(0, -50%); background-color: var(--brand-color); border-radius: 0 0.5rem 0.5rem 0; padding: 0 1em 1.5rem 1rem; font-size: 1.5rem; line-height: 1.5; box-sizing: border-box; letter-spacing: .03em; } .slide-right { width: 100%; overflow: hidden; text-align: center; } .slide-right2 div { animation-delay: 0.5s; animation-fill-mode: backwards; } .slide-right3 div { animation-delay: 1s; animation-fill-mode: backwards; } .slide-right4 div { animation-delay: 1.5s; animation-fill-mode: backwards; } .slide-right5 div { animation-delay: 2s; animation-fill-mode: backwards; } @keyframes slide-right { from { margin-left: -180%; } to { margin-left: 0%; } } @media only screen and (max-width: 768px) { /* For mobile phones: */ .menu-container { top: 0; transform: none; display: none; z-index: 2002; animation: 1s menu-opening ease-in-out forwards; } @keyframes menu-opening { 0% {transform: scale(0); transform-origin: top left;} 100% {transform: scale(1);} } .logo { transform: scale(0.8); top: 0; right: 0; /* position: absolute; */ padding: 0; animation: 1s scale-logo ease-in-out; animation-fill-mode: backwards; } @keyframes scale-logo { 0% {transform: scale(0.8);} 100% {transform: scale(1);} } .mobile-menu { margin: 1rem 0.5rem 0 0.5rem; display: flex; flex-direction: column; align-items: center; position: fixed; width: 25px; animation: 1s scale-mobile-menu ease-in-out; animation-fill-mode: backwards; z-index: 2000; justify-content: space-between; height: 1.2rem; z-index: 2001; } @keyframes scale-mobile-menu { 0% {transform: scale(1);} 100% {transform: scale(1.3);} } .mobile-menu div { width: 80%; height: 3px; background-color: var(--brand-color); border-radius: 1px; } .menu-item { animation: none; } .first-menu { margin-top: 0; } #home-menu { display: block; } } 菜单组件.js fetch("menu-component/menu-component.html") .then(stream => stream.text()) .then(text => define(text)); function define(html) { class MenuComponent extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode: 'open'}); shadow.innerHTML = html; let menuContainer = shadow.querySelectorAll(".menu-container")[0]; document.addEventListener('click', (event) => { if (event.target !== this) { this.closeMobileMenu(menuContainer); } }); let menuItems = shadow.querySelectorAll(".menu-item"); for (let menuItem of menuItems) { menuItem.addEventListener('click', this.onMouseClick); } let mobileMenu = shadow.querySelectorAll(".mobile-menu")[0]; mobileMenu.addEventListener('click', this.onMobileMenuClick); //set the menu with the name of the page if it is not home page const url = window.location.href; const index = url.lastIndexOf("/"); const urlPage = url.substring(index+1); let bodyWidth = document.body.clientWidth; console.log(bodyWidth); if (!urlPage.includes('index') && urlPage !== '') { let pageTitle = shadow.querySelectorAll(".mobile-page-title")[0]; if (bodyWidth <= 750) { let pageNameExt = url.split("/").pop(); let pageName = pageNameExt.split(".")[0]; if (pageName.includes("design")) { pageName = "designs"; } else if (pageName.includes("logo")) { pageName = "logos"; } pageTitle.innerHTML = pageName; pageTitle.style.display = 'inline'; mobileMenu.children[0].style.backgroundColor = 'var(--background-color)'; mobileMenu.children[1].style.backgroundColor = 'var(--background-color)'; mobileMenu.children[2].style.backgroundColor = 'var(--background-color)'; } else { pageTitle.style.display = 'none'; } for (let menuItem of menuItems) { menuItem.style.animation = 'none'; let id = menuItem.getAttribute('id').split('-')[0]; if (url.includes(id)) { menuItem.nextElementSibling.style.width = "100%"; menuItem.nextElementSibling.style.borderTop = "3px solid var(--complementary-color)"; } } mobileMenu.style.animation = 'none'; let logo = shadow.querySelectorAll(".logo")[0]; logo.style.animation = 'none'; } } } customElements.define('menu-component', MenuComponent); } 在5月份的html页面中我这样使用它（这是未找到的页面）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script type="module" src="menu-component/menucomponent.js"></script> <title>Page not found</title> </head> <body> <menu-component></menu-component> <div class="content-container"> <div class="page-title"> Content not found </div> <div class="inner-container"> <div class="text-description"> It looks like there is a problem with the page you want to see. Please try with another content.</a> </div> </div> </div> </body> </html> 我注意到我在设置菜单组件元素的样式时遇到了问题：元素在没有样式的情况下显示（未应用 CSS），然后进行渲染。我认为这是名为 FOUC 的 Web 组件的众所周知的问题。我遵循了建议，并在 style.css 中添加了以下规则： menu-component:not(:defined) { opacity: 0; } menu-component { opacity: 1; transition: opacity 0.5s ease-in-out; } 这看起来像是解决了问题，但并非总是如此。在 Chrome 和 Firefox 中，硬重新加载后可以看到它。在 Safari 中它始终可见。 我该如何解决？ 我期待 style.css 中的代码可以解决问题。 根据评论：使用 <link onload="..."> 事件在加载（并解析）CSS 文件后应用样式 <my-component color="green">Hello! Web Component</my-component> <script> customElements.define("my-component", class extends HTMLElement { constructor() { const element = (tag, props = {}) => Object.assign(document.createElement(tag), props); super() .attachShadow({mode:"open"}) .append( this.STYLED = element("STYLE", { innerHTML: `:host{opacity:0}` }), element("STYLE", { innerHTML: `:host{display:inline-block}` }), element("LINK", { rel: "stylesheet", href: "https://cdn.sstatic.net/Sites/stackoverflow/primary.css", onload: (evt) => { console.log("loaded CSS"); this.STYLED.innerHTML = `:host{transition:opacity 2s}` } }), element("SLOT"), element("P", { className: `is-required`, innerHTML: `P styled by stackoverflow/primary.css` }) ); console.log("created shadowDOM"); } connectedCallback() { console.log("connectedCallback") } }); </script>
我是 JavaScript Web 组件的新手，在本例中，我尝试通过单击按钮来调用方法，但它不起作用...... 运行这段代码： 我是 JavaScript Web 组件的新手，在本例中，我尝试通过单击按钮来调用方法，但它不起作用...... 运行此代码： <test-element></test-element> <script type="text/javascript"> class TestElement extends HTMLElement { constructor() { super(); } sayHello() { alert('Hello') } connectedCallback() { this.innerHTML = `<button onclick="${this.sayHello}">Hello</button>`; } } customElements.define('test-element', TestElement); </script> 如果您单击“Hello”，它不会执行 sayHello 方法... 这里的问题是按钮的 onclick 属性中的上下文并不引用 TestElement 类的实例。要使其正常工作，您应该在 connectedCallback 方法内为按钮单击添加一个 事件侦听器。 <test-element></test-element> <script type="text/javascript"> class TestElement extends HTMLElement { constructor() { super(); } sayHello() { alert('Hello'); } connectedCallback() { this.innerHTML = `<button id="helloButton">Hello</button>`; const button = this.querySelector("#helloButton"); button.addEventListener("click", () => { this.sayHello(); }); } } customElements.define('test-element', TestElement); </script>
当使用以下代码将 Vue 3 组件包装到自定义元素中时，我注意到调用者未收到 Vue 事件。 导入 { createApp、defineCustomElement、getCurrentInstance...
我正在尝试向 Web 组件添加自定义滚动条。 我对 Web 组件不是很熟悉，但我知道很难将伪元素应用于部件。从我的阅读来看，有一个...
我希望开始使用 stencil.js 来管理多个项目的 Web 组件，以便它们是标准的、一致的和可维护的。我想到的一个问题是……
将 unsafeHTML 与 lit-element 一起使用时出错
这是我的代码： 从 'lit-element' 导入 {customElement, LitElement, html, property, css}; 从 'lit-html/directives/unsafe-html.js' 导入 {unsafeHTML}； @customElement('我的组件') 出口c...
新的 Popover API 在以声明方式使用时，无法跨阴影边界工作。在创建封装一些逻辑并使用弹出框的可重用 Web 组件时，这是一个限制
我正在开发新的网络组件，并遇到了一些有关插槽的问题。 我有一个外部容器组件，内部有一个“主槽”，其中应插入多个元素（...
我们的平台建立在带有 Web 组件的微前端架构上。我们对其中一些使用 Stencil，这意味着我们在一个网页中有多个 Stencil 应用程序。此外，我们还有...
我相信 Web 组件插槽的原则之一是它们旨在模仿标准 html 期望。它们允许我们以与开发人员相同的方式将元素投影到组件中
为什么 v 模型是模板组件的唯一工作方式？它更新一个值，但该值不会更新其组件
我在 Vue 应用程序中使用带有 v-model 的模板组件时遇到一些问题。我不确定预期的行为是什么。 我有这个非常简单的应用程序： 我在 Vue 应用程序中使用带有 v-model 的模板组件时遇到一些问题。我不确定预期的行为是什么。 我有这个非常简单的应用程序： <ifx-search-bar v-model="message" is-open="true" show-close-button="true"></ifx-search-bar> <input type="text" id="input1" @change="handleChange($event)"> <input v-model="message" id="input2" placeholder="edit me" /> export default { data() { return { something: 'test', message: "" } }, methods: { handleChange(event) { this.message = event.target.value } } } 在这个简单的示例中，您可以看到我们有一个搜索栏组件和两个标准 html 输入元素。 当您在 input1 中输入内容时，您会调用一个函数，该函数会更新 this.message 变量，该变量绑定到第二个输入 input2 和搜索栏组件。正如预期的那样，inpu2的值发生了变化，但搜索栏组件没有变化，我想知道为什么？ 如果我在搜索栏组件中输入某些内容，则 this.message 会更新，并且 input2 的值也会相应更改，但反之亦然不起作用。似乎只有单向绑定有效，而双向绑定无效。绑定变量 message 已更新，但 IT 不会像 html 输入元素那样更新搜索栏组件。 有人知道为什么吗？这是预期的行为，还是错误/问题？ PS：这是非 JSX 代码： export class SearchBar { @Prop() showCloseButton: boolean = true; @Prop() isOpen: boolean = true; @State() internalState: boolean; @Event() ifxChange: EventEmitter; @Prop({mutable: true}) value: string; @Watch('isOpen') handlePropChange() { this.internalState = this.isOpen; } handleCloseButton = () => { this.internalState = !this.internalState; } handleSearchInput(event: CustomEvent) { this.value = event.detail.detail; this.ifxChange.emit(event.detail); } setInitialState() { this.internalState = this.isOpen; } componentWillLoad() { this.setInitialState() } 看来我也有同样的问题。能解决吗？
Webpack/React 在运行时因依赖项打字稿错误而失败
我有一个 React + Webpack 项目，旨在从不同的存储库中获取 React 模块，然后以特定的方式将它们捆绑起来成为 Web 组件。我的模块已导入到我的包中
经过我的测试，直接使用嵌套编写css是有效的，但是在WebComponent中，使用:host选择器嵌套后就无效了。以下是演示代码，我的Chrome版本号...
如何将自定义样式仅应用于一个 Astro 布局及其所有子布局？
这是我第一次使用Astro（以及一般的组件），应用样式由于封装而将我带入了死胡同。 我想要的是设计某些布局的样式（例如，博客
在使用本机 Web 组件时，当我有未知的新类型组件进入 DOM 时，我需要能够在页面加载后添加类定义。 编辑：一点解释： 网络组件...
好时光 如何在lit中动态设计风格？ 我的主要目标是根据用户在输入元素中的输入来更改元素的颜色。 我的代码截图
Web 组件“无法将属性‘innerHTML’设置为 null”
我创建了一个非常基本的自定义元素，它可以根据提供的属性 person 更改其值。但每当我加载自定义元素时，我都会收到此错误：无法设置属性 'innerHT...