-
3 votesanswersviews
聚合物错误“已使用Polymer.Base.importHref注册了具有该名称的类型”
我有一个由其他组件引用的Polymer组件 . 就像是: 在 index.html <link rel="import" href="lib/polymer/polymer.html"> <link rel="import" href="component-one.html"> ... &l... -
2 votesanswersviews
Polymer 3.0自定义元素 - 如何使用javascript与SVG交互
我是Polymer的新手,所以我在开发过程中学习 . 现在我正在使用最新版本的Polymer 3.0 . 我已经在这个网站上有一个工作的首页我正在努力 . 虽然我试图让一切都在聚合物上工作,但我仍然坚持使javascript工作 . 在原始网站上,我使用的是此代码 的index.html <div class="year-overview"> ... -
1 votesanswersviews
自定义元素Web组件Shadow DOM供应商脚本/元素
当使用利用Shadow DOM的Custom Elements时,注入第三方脚本和Invisible reCAPTCHA等需要脚本的元素的官方方法是什么: <script src="https://www.google.com/recaptcha/api.js" async defer></script>` 要呈现 <button> 等HT... -
7 votesanswersviews
编写v1嵌套Web组件
我是webcomponents的新手 . 由于web组件的v1可用,我从那里开始 . 我已经在网上阅读了关于他们的各种帖子 . 我对正确编写它们特别感兴趣 . 我已经阅读了有关插槽并让它们正常工作的信息,尽管我的努力并未导致按照我的预期方式工作的插槽web组件 . 如果我编写了这样的嵌套Web组件,嵌套/开槽web组件中的DOM不会插入父级的插槽中: <parent-component>... -
2 votesanswersviews
自定义元素中断模板上的createElement
我正在创建两个自定义元素,使用link rel =“import”将它们添加到index.html . 一个是带插槽的容器,另一个是插槽中的数字 . 这两个元素都有一个带有模板的HTML文件和一个指向js文件的链接,该文件将它们定义为自定义元素 . 要将自定义元素类声明链接到我正在使用的HTML模板: class PuzzlePiece extends HTMLElement{ construc... -
2 votesanswersviews
在shadow DOM插槽内继承
这里的规范 - https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree有如下注释 . 注意:向插槽分配元素的一个非显而易见的结果是它们从它们分配给的插槽继承 . 他们原来的轻树父,以及他们的插槽被分配到的任何更深的插槽,都不会影响继承 . 所以我想一旦一个元素被插入,那么应用于该元素的样式可以像 color 或 backgroun... -
3 votesanswersviews
如何使用vanilla js标记自包含自定义元素中的模板?
我有一个只显示塔罗牌的自定义组件 . 在自定义元素之前,我已经定义了一个模板 .在我的wc的connectedCallback中,我将模板本身附加到阴影根,然后通过在阴影根中克隆它来将其标记出来 . 我这样做有两个原因: 我希望我的wc组件是一个自包含的模块;因此,我想在与自定义元素相同的位置定义我的模板 . 这似乎是唯一可以标记我的模板以使其可用而不会将其粘贴在所有者文档中的方法 . ... -
0 votesanswersviews
自定义元素的样式列表
影子dom的伟大和陷阱是封装的风格,这让我想到了如何实现列表元素的样式 . 假设你有2个自定义元素,一个列表和一个列表项: Option one 将阴影dom附加到列表项并实现您的样式,这样可以正常工作,并且您可以在html中创建标记....但是,假设由于一些奇怪的原因,样式达到1MB并且您在该列表中有1000个项目,浏览器是否只为这些元素使用1GB,因为每个元素都包含自己的样式?其次,如果列表对... -
0 votesanswersviews
Web组件:如何监听Shadow DOM加载事件?
我想在我的自定义元素中加载Shadow DOM时执行JavaScript代码 . 我尝试了以下代码,但它没有用 X-component.html: <template id="myTemplate"> <div>I am custom element</div> </template> <script> var... -
17 votesanswersviews
原生形式的自定义输入元素
对于Web组件,人们想要创建和覆盖的元素之一是 <input> . 输入元素很糟糕,因为它们很多东西取决于它们的类型而且通常难以定制,因此人们总是想要修改它们的外观和行为是正常的 . 两年前或多或少,当我第一次听说Web组件时,我非常兴奋,我想要创建的第一种元素是自定义输入元素 . 现在规范已经完成,看起来我对输入元素的需求没有得到解决 . Shadow DOM应该允许我改变它们的... -
6 votesanswersviews
在Shadow DOM中为阴影根创建一个样式
我正在尝试设置阴影DOM根的子元素 .这定义了一个名为 element-el 的自定义元素,它有一个 span 类,名为'x',其中包含字母x,我想要的事情状态为红色 . class El extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode:'... -
0 votesanswersviews
如何在影子dom / web组件中执行javascript?
我正在尝试使用模板/ html本身封装/引用的大多数javascript创建自定义元素 . 如何从模板/元素中生成javascript以在阴影dom中执行?以下是更好地理解该问题的示例 . 如何从 template.innerHTML ( <script>alert("hello"); console.log("hello from tpl");... -
2 votesanswersviews
在嵌套的shadow DOM中重新分配重复的槽元素
背景:此问题涉及为最近版本的Chrome开发扩展程序 . 它依赖于javascript功能,例如HTML导入和自定义元素,这些功能并非在所有浏览器上都可用,但在这种情况下可以 . 我正在尝试实现简化的HTML自定义元素,如下所示: <custom-el> <span slot="head">Great</span> <... -
0 votesanswersviews
如何将模板组件与普通JS自定义元素(Web组件)一起使用?
我在使用JS自定义元素(Web组件)以及在IE11和现代浏览器中支持的stenciljs组件时遇到问题 . 我已经下载了模板启动项目https://github.com/ionic-team/stencil-component-starter并尝试了以下代码: ... <script src="/build/app.js"></script> <s... -
0 votesanswersviews
从另一个webapp使用Polymer 3.0自定义元素
我正在尝试使用在我的 webapp 中使用Polymer CLI构建的自定义Web组件 . 我通过以下步骤来设置第一个带聚合物的虚拟自定义元素: 使用节点v8.9.1,npm v5.5.1,polymer-cli v1.7.2 mkdir my-custom-element && cd my-custom-element聚合物引发聚合物-3-元素 聚合物服务 由 pol... -
1 votesanswersviews
纸张自动完成验证无效
我正在研究基于聚合物的前端项目 . 我正在努力寻找我需要的组件的信息和工作示例 . 我知道有这些组件的演示展示,但他们没有给我我需要的东西 . <iron-form id="formForm"> <form> <paper-autocomplete label="Country" required e... -
1 votesanswersviews
扩展HTMLTextAreaElement的HTML5 ES6自定义元素会导致非法构造函数崩溃
我需要从HTMLTextAreaElement扩展自定义元素,以便在表单中使用并直接获取值 . 但我总是得到Illegal Constructor Message HTML: <!DOCTYPE html> <html> <head> </head> <body> <div> <worki... -
158 votesanswersviews
自定义元素是否有效HTML5?
我一直无法找到自定义标签在HTML5中是否有效的明确答案,如下所示: <greeting>Hello!</greeting> 我没有在规范中找到任何方式: http://dev.w3.org/html5/spec/single-page.html 并且自定义标签似乎不会使用W3C验证器进行验证 . -
2 votesanswersviews
自定义元素FireFox中的非法构造函数
我有一个带有以下构造函数的CustomElement: export default class SomeCustomElement extends HTMLElement { constructor(templateId) { super(); this.insertTemplateInstance(templateId); } ... }... -
0 votesanswersviews
为什么wecomponentsjs / custom-elements-es5-adapter.js无效
我将Polymer应用程序转换为Polymer 2.我将我的组件更改为ES6 Class语法(是的,我知道我可以将它们保留为v1.7混合风格,但我希望它们是ES6类) . However 当我将代码转换回ES5(使用BabelJS)时,我遇到了一个关于ES5 'classes'扩展原生元素(https://github.com/babel/babel/issues/4480)的已知问题 . 我尝试... -
1 votesanswersviews
ES6 - 自定义元素不与webpack一起使用
我正在尝试使用ES6和webpack创建自定义元素 https://codepen.io/nagasai/pen/MoRrxO 下面的代码没有webpack HTML: <my-element><my-element> JS: class MyElement extends HTMLElement { constructor() { super() } c... -
10 votesanswersviews
Web组件在IE11和Edge中实际可用吗?
Web组件是一个热门的新事物,也是一个真正的Web标准,每个人都在谈论它们并且可能使用它们,它们似乎是我们遇到的问题的完美解决方案(在不同的站点之间共享组件) . 所以我们构建了几个Web组件 . Chrome中的工作正常,但IE11却没有 . 使用polyfill可能吗? https://www.webcomponents.org/polyfills有大量的polyfills,但IE11一直抱... -
0 votesanswersviews
自定义拖放HTML5
我试图使用拖放来重新排序列表中的元素(纯javascript) . 我想在拖动操作期间设计“鬼元素”的样式 . 因为我读到如何做到这一点没有办法,我正在创建重复元素(我想要的样式)准确定位在拖动操作期间原始元素应该在哪里,并且它的位置在ondrag事件内更新 . 问题是,由于这个重复元素总是完全在光标下,因此无法捕获其他元素上的dragover或dragenter事件 . 无论DOM在哪里链接的“... -
0 votesanswersviews
HTML导入webcomponents polyfill在firefox中不起作用
我在一个示例应用程序中尝试webcomponents . 由于某些浏览器中不包含某些规格,我尝试使用polyfill . 在Mozilla firefox中,我尝试启用密钥dom.webcomponents.enabled并添加一些polyfill(不在浏览器中) . 我使用了webcomponents.js polyfill中的HTML Import polyfill . HTMLImport还... -
3 votesanswersviews
是否有针对Internet Explorer的自定义元素polyfill?
我正在尝试在我的应用中使用自定义元素,并使其兼容所有浏览器(Chrome,Safari,Opera,FireFox,IE) . 我用Babel将代码从ES6转换为ES5 . 我查看了Polyfills,并且能够通过使用以下内容使网站在除Internet Explorer之外的所有浏览器上本地工作: <script src="../node_modules/webcomponents... -
1 votesanswersviews
扩展HTMLTextAreaElement的HTML5 ES6自定义元素会导致非法构造函数崩溃
我需要从HTMLTextAreaElement扩展自定义元素,以便在表单中使用并直接获取值 . 但我总是得到Illegal Constructor Message HTML: <!DOCTYPE html> <html> <head> </head> <body> <div> <worki... -
3 votesanswersviews
如何使用v1规范使用Polymer 2.0 ES5元素?
我已经成功构建了许多Polymer 2.0元素,它们在支持ES6的浏览器中运行良好 . 当我尝试将它们转换为ES5时,浏览器会抛出一堆错误,如下所示: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function... -
9 votesanswersviews
使用babel透明化基于类的Web组件
我有一个简单的Web组件,遵循最新的web components v1 class syntax,它在Chrome和Firefox / Edge(使用polyfill)中运行良好,但我希望它能在IE11中运行,所以我需要转换类 . 然而,通过babel运行它会生成不再适用于任何浏览器的代码 . 有没有办法用类语法生成向后兼容的Web组件,还是有一种首选方法来编写Web组件以实现最大兼容性? 示例代... -
1 votesanswersviews
如何对polyfilled webcomponents自定义元素进行单元测试
我想对使用 webcomponents.js polyfill的web组件进行单元测试 . 我的组件是用es6 scss制作的,并且使用构建任务,我将es6转换为es5,将scss处理为css并将两个结果文件插入到html文件中,以便在我的应用程序中使用 HTML Import functionnality的组件 . 以下是自定义元素声明的组件类的示例: class my-component ...