问题标签 [html-imports]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 嵌套元素(Web 组件)无法获取其模板
我使用具有两个自定义元素 (v1) 的 Web 组件制作了一个简单的示例,其中一个嵌套在另一个元素中。索引.html:
应用容器.html:
工具栏.html:
但是在 toolbar.htmldocument.currentScript
中与在 app-container.html 中相同,因此querySelector('#app-toolbar')
无法找到带有 id 的模板app-toolbar
。如何解决这个问题呢?
在 Chrome 55 上测试的示例(没有 polyfill)。
polymer - 在延迟加载的应用程序部件之间共享行为
正如 Polymer Starter Kit 或 Polymer Shop 所展示的,我们在 Polymer 应用程序中使用了延迟加载。这意味着我们有一个基于抽屉的布局,并且应用程序外壳会导入抽屉内容以及主页内容。
现在我们引入一个行为并在自定义元素 A 和 B 中使用它,其中 A 显示在抽屉中,B 显示在主页中。现在的情况是我们收到浏览器 (Chrome) 警告,flattenBehaviorsList
但无法找到该行为。
我们假设发生这种情况是因为主页的Polymer.importHref
调用(选项async
是)识别行为(在自定义元素 B 中)并将其导入添加到 HTML 导入映射。true
但在导入内容之前,抽屉的Polymer.importHref
(option async
is true
) 调用想要导入自定义元素 A 的行为并从 HTML 导入映射中获取内容。但由于导入未完成,行为是null
.
这个假设是真的吗?如果是的话,这是否是 Chrome 中的一个错误——只是一个想法,因为 Firefox 似乎可以处理这个问题?或者它是糟糕的设计,我们不应该在不同的延迟加载应用程序部分共享相同的行为?
你怎么看?
提前致谢
html - Ionic Framework - HTML rel import works on emulator but NOT on device
I am trying to import the contents (import the reference of the CSS and JavaScript files) of a particular html page, named "helper.html" to another html page,named "navigation.html". It works on the emulator (the reference of the CSS and JavaScript files of the "helper.html" can be imported) but NOT on the device (the device I am using is Android tablet).
My project directory looks like this:
www
-templates
- navigation.html (inside templates folder)
-helper.html (inside www)
In my "navigation.html", I have the following code snippet:
In my "helper.html", I have the following code snippet:
Can someone tell me a way how I could make this work on the android device? Thanks!
web-component - Web 组件中的模板 html 和模板字符串
使用 html 模板(然后是 html 导入)创建 Web 组件还是使用模板字符串更好?这些方法的优缺点是什么?
web-component - HTML Import webcomponents polyfill在Firefox中不起作用
我正在示例应用程序中尝试 webcomponents。由于某些浏览器不包含某些规范,因此我尝试对这些规范使用 polyfill。在 Mozilla firefox 中,我尝试启用键 dom.webcomponents.enabled 并添加一些 polyfill(不在浏览器中)。我使用了来自 webcomponents.js polyfill 的 HTML Import polyfill。
HTMLImport 仍然不能在 firefox、internet explorer 中工作(即使使用 polyfill)。( https://github.com/webcomponents/webcomponentsjs )
我还尝试了 customElements v1 polyfill,不能在 Internet Explorer 和 Firefox 中工作。( https://github.com/webcomponents/custom-elements )
有没有人成功地将 HTMLimports polyfill 与 customElements V1 polyfill 包括在内?
javascript - Web 组件(香草,无聚合物):如何加载 content?
i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from
i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from this example , I put this code in a file named my-element.html:
This is my index.html:
I'm on latest Chrome 56, so i don't need polyfill. I run polyserve, and only "Does it works?" appears. I tried (like the original example) the "customElements.define" syntax instead of "document.registerElement", but won't work. Have you some ideas? And what have I to change if i don't want to use shadow dom?
thanks
How to get the voip call log information in application - Call Kit
I have implemented call kit in my voip app in which i generate the call logs for incoming or outgoing calls (visible on phone recent tab).
When i click on call logs it will open my app. I've overridden the UIApplication
delegate method to get the handler.
But i unable to get call log related information in NSUserActivity
.
How i can get the call log information in my app?
Any help much appreciate. Thanks!
i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from
i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from this example , I put this code in a file named my-element.html: This is my index.html: I'm on latest Chrome 56, so i don't need polyfill. I run polyserve, and only "Does it works?" appears. I tried (like the original example) the "customElements.define" syntax instead of "document.registerElement", but won't work. Have you some ideas? And what have I to change if i don't want to use shadow dom? thanks
I have implemented call kit in my voip app in which i generate the call logs for incoming or outgoing calls (visible on phone recent tab).
When i click on call logs it will open my app. I've overridden the UIApplication
delegate method to get the handler.
But i unable to get call log related information in NSUserActivity
.
How i can get the call log information in my app?
Any help much appreciate. Thanks!
javascript - 使用 ES6 模块从相邻脚本标签导入
对于 ES6 模块,是否有当前方法或管道中的方法从页面上已有的标签到import
模块?<script>
例如,如果我有 2 个<script>
标签,
我import
在第二个标签的语句中放入什么<script>
来代替问号?
该id
属性用于识别目的,显然,需要有某种方法来识别<script>
您需要的标签。它可以通过类或任何其他方式完成,但 ID 必须是唯一的(尽管许多浏览器只使用带有 的最后一个标签id
),所以我认为这是确保您拥有正确标签的好方法。也可以通过<script>
在文档中按位置获取标签来完成:例如,在这里你得到第二个脚本标签,所以也许你可以做类似的事情
还有一件事:如果这可以跨 HTML 导入工作,那也很棒。我最初的目的是在站点的不同页面上重用 React 组件,在这些页面中它们可能无法使用相对路径导入,而且,至少对于 Webpack,绝对路径并不总是相对于服务器的根目录:有时它们是相对于计算机的根目录,或者至少是网络服务器的根目录。
如何直接从<script>
页面上的另一个标签导入值?
javascript - 获取错误link.import在Firefox中为空
javascript - Polymer error "A type with that name is already registered" using Polymer.Base.importHref
I have a Polymer component that's referenced by other components. Something like:
In index.html
In component-one.html
In component-two.html
In sub-component.html
The problem comes in when I attempt to dynamically load the second component in index.html
:
This throws an exception:
Uncaught DOMException: Failed to execute 'registerElement' on 'Document': Registration failed for type 'sub-component'. A type with that name is already registered.
I figure this is happening due to sub-component.html
being referenced by two components, but both also reference lots of paper and iron elements and none of them cause this error.
How to I avoid this exception?
web-component - 自定义元素中断模板上的 createElement
我正在创建两个自定义元素,它们都使用链接 rel="import" 添加到 index.html。一个是带有插槽的容器,另一个是在插槽中放入数字的东西。这两个元素都有一个带有模板的 HTML 文件和一个指向将它们定义为自定义元素的 js 文件的链接。要将自定义元素类声明链接到我正在使用的 HTML 模板:
这个拼图元素和容器正确渲染,当您手动将它们放入 index.html 轻 dom 时,它们都可以正常工作
但是,一旦我尝试在 index.html 中使用 JS 创建和附加拼图:
我在特殊拼图灯光 dom 中看到了一个新拼图,但它不占用插槽,不渲染,并且控制台出现错误:
未捕获的类型错误:无法在 HTMLDocument.createElement (:3:492) at (index):37 处读取新 PuzzlePiece (puzzle-piece.ts:8) 的属性“内容”
据我所知,问题是在使用 document.createElement 时,浏览器正在进入类定义,但 document.currentScript.ownerDocument 与仅手动使用 HTML 标记时不同。我相信正因为如此,组件找不到它的模板。这是我的第一个 Stack Overflow 问题,因此我们将不胜感激任何反馈/帮助!