web-component相关内容

引用Vue v3自定义元素组件中的主体元素

好的,我知道这个问题的一些变体已经被问到了,在Vue的不同版本和API中...但我一直没能弄明白,所以下面是我认为我的不同的原因: 我正在尝试构建以下组件: 内部足够复杂,使用Vue而不仅仅是native web components构建是有帮助的,但是... 将在页面上的Vue上下文之外运行(而不是在Vue应用程序中),因此打包为Web组件/自定义元素from Vue和... 实 ..
发布时间:2022-08-15 14:21:37 前端开发

Web组件影子DOM中的REM

我们知道可以将font-sizeon[2-1]>设置为正常DOM节点中的rembase,我使用这个技巧使我的应用程序的字体更灵活,随js动态更改。 然而,当我创建一个Web组件时,我发现阴影DOM中的rem总是指向16px,即使我尝试在阴影DOM中添加样式。16px是常见浏览器的默认字体大小。 这里有一个简单的演示: https://jsfiddle.net/qmacwb6r/ ..
发布时间:2022-08-15 14:09:52 前端开发

使用作为生命创建独立的Web组件版本

我已经创建了一个Web组件,用于在任何html内容中显示RASE。 我使用Lit Element Typescript Starter Project作为基线,它附带了rollup.config.js文件。 我将输出格式更改为iife,其余格式保持不变,但组件和包名称除外。我这样做的原因是,我希望可以通过脚本标记轻松地访问包,而ROLLUP说iife格式可以做到这一点。 This ..
发布时间:2022-05-09 19:25:43 前端开发

如何从父项向下设置开槽零件的样式

如何设置已插入到Web组件中的部件的样式? 我的目标是创建“功能”组件,它只根据它们所处的状态呈现某些部分(使用Redux)。然后在容器中呈现这些组件。 此容器知道它可以预期哪些类型的子项,并应相应地为子项中的部件设置样式。 帖子提要就是一个例子,其中所有帖子都是相同的Web组件,只呈现某些部分。 然后有一个网格提要组件,并在网格中呈现这些帖子。 另一个按时间顺序的提要可能会简单地将帖 ..
发布时间:2022-05-09 19:16:43 前端开发

由用户自定义本机Web组件样式

我构建了一系列Web组件,消费者可能正在使用其中的一个或多个组件。 将script标记添加到缩写为JS的组件中,然后在代码中使用Web组件,如下所示:。 这些组件中内置了css,但是,我需要添加允许消费者自定义颜色主题的功能,我想知道我在这里的方法是否可以改进,或者是否有更好的方法一起。 现在我进行了设置, ..
发布时间:2022-05-09 19:07:48 前端开发

使用Web组件中定义的函数

我构建了我的Web组件DataUint,并为其分配了一个标记,如下所示: class DataUint extends HTMLElement { ... set value(x) { ... } ... } customElements.define("data-uint", DataUint); 创建和访问这样的组件时: x = doc ..
发布时间:2022-05-09 18:58:34 前端开发

从Reaction组件创建纯Web组件

我正在尝试从Reaction组件构建Web组件,一切正常,但有两个问题我正在尝试解决: 有没有办法将此类Web组件转换为纯Web组件(使用webpack、Transspile或其他方式),以便不捆绑Reaction和其他依赖项? 有没有办法只包含所需的依赖部分,或者只包含ALL/NONE,必须使用webpack的外部设置才能使用宿主的版本? 谢谢 推荐答案 对于第一个问题 ..
发布时间:2022-05-09 18:21:25 其他开发

自定义元素设置:构造函数与连接的回调

我是Web组件的新手,我注意到一些示例在定制元素的构造函数中设置DOM,而另一些示例则在ConnectedCallback中设置。 由于两者似乎都工作得很好(尽管我只尝试了Chrome),我认为主要的区别是用户在js中创建元素而不是将其附加到页面的情况? 我想这里的主要问题是我是否错过了一些其他原因而不是更喜欢一种方法。 谢谢。 推荐答案 自定义元素构造函数的最佳实践和规则 ..
发布时间:2022-05-09 18:17:15 前端开发

如何从子组件引用父组件中的方法与Vanilla JS Web组件?(不是任何框架或库)

问题是,我如何从子组件调用子组件? 示例:假设我在父组件中有一个登录表单组件。因此,我需要在单击登录按钮时显示该表单。显示登录表单的函数将在父组件中编写,我需要在单击子组件中的按钮时测试该函数。 这是父组件👇 import Nav from './componets/navigation-bar.js' import Comp from './componets/footer. ..
发布时间:2022-05-09 18:04:24 前端开发

Shadow DOM 是否能够保护元素?

目标:一个封装的小部件 假设我是一个显示朋友列表的小部件的开发者,例如: 你的朋友 Michael、Anna 和 Shirley 喜欢这个网页! 第一种方法:创建 span 的脚本 天真地,我创建了一个脚本,将这些信息放在网站上的 span 中.但是,ExampleSite 的所有者现在可以通过简单的 DOM 操作访问您朋友的姓名! 这是一个很大的隐私/安全问题. 第 ..
发布时间:2022-01-18 22:07:02 其他开发