个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
27
4
我目前正在尝试学习如何使用最新稳定的 Chrome 52 来使用 Web 组件(不使用 Polymer)(我也在 Chrome 52 上使用 webcomponents.js polyfill 进行了尝试)。但是，当我这样做时，querySelector 似乎出错了。当我尝试通过 document.querySelector('#template') 在控制台中获取(诚然命名不当的模板 ID)时，它为空并且无法找到它。
我正在使用 this guide尽管有一些 ES6 语法。 (我也试过直接复制粘贴也是一样的问题)
我也尝试在 shadowDOM 中搜索，但它也不存在。
view.html
<template id="template">
<style>
</style>
<div class="container">
<h1>WZView</h1>
</div>
</template>
<script>
"use strict";
class WZView extends HTMLElement {
createdCallback () {
var root = this.createShadowRoot();
var template = document.querySelector('#template');
root.appendChild(document.importNode(template.content, true));
}
}
document.registerElement('wz-view', WZView);
</script>
index.html
<!DOCTYPE html>
<html>
<head>
<!--<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>-->
<link rel="import" href="view.html">
</head>
<body>
<wz-view></wz-view>
</body>
</html>
控制台:
view.html:16 Uncaught TypeError: Cannot read property 'content' of null
> document.querySelector('#template')
null
最佳答案
在<script> s 在导入的 HTML 中，不要使用 document.querySelector(...) .
// while inside the imported HTML, `currentDocument` should be used instead of `document`
var currentDocument = document.currentScript.ownerDocument;
...
// notice the usage of `currentDocument`
var templateInsideImportedHtml = currentDocument.querySelector('#template');
示例(修复问题中的示例):
var currentDocument = document.currentScript.ownerDocument; // <-- added this line
class WZView extends HTMLElement {
createdCallback () {
var root = this.createShadowRoot();
var template = currentDocument.querySelector('#template'); // <-- changed this line
root.appendChild(document.importNode(template.content, true));
}
}
兼容性:
只有 IE 11 won't support it .大多数browsers (including Edge) implement it , 以及 IE 10 and below there is a polyfill .
关于javascript - QuerySelector 在 HTML 导入时找不到模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37665122/
27
4
0
这两种引用方法的主要区别是什么？ 使用其中一种有什么好处？另外，它们各自最适合哪种用例？ var selection = document.querySelector('.selector') !==
对于下面给出的代码，document.querySelector('createButton') 和 Polymer.dom(this.$).querySelector('createButton')
查看 mdn“querySelector”会在两个部分下弹出，但它们似乎都达到了相同的目的。哪一个是不同情况的理想选择？ ...或者它们基本上在功能上是相同的？ https://developer.m
这个问题已经有答案了: Is element.querySelector() different from document.querySelector()? (2 个回答) 已关闭 3 年前。 当我
我做了几次迭代测试来测试 Document.querySelector 的效率和 Element.querySelector . 标记: 脚本: 查询 Document.querySelec
如何使用 document.querySelectorAll() 从下面的代码中选择特定的文本输出？ 我想在变量中捕获结果，并尝试使用以下代码来实现: let result = document.qu
HTML 2018-2019 如何使用 CSS 选择器定位元素 onclick 我试过下面的代码但不工作 ie.document.querySelector("[onclick='loadYearPa
通常在 javascript 中使用查询选择器时，我们会这样做， ABCD var className = 'abcd'; var x = document.querySelector('.'+cla
我目前正在学习 querySelector方法，惊讶地发现它被归类为过时了 这是 screenshot 的链接 querySelector 方法真的已经过时了吗？若有，原因为何？应该使用什么方法呢？
MDN 指定的 querySelectorALL() 不支持事件节点并且仅返回静态节点。 MDN querySelectorALL querySelector() 是否支持活节点 MDN 没有指定任何
这个问题在这里已经有了答案: What does this `…${…}…` code in the node docs mean? [duplicate] (1 个回答) 关闭 6 年前。 我是
根据下面的书面代码，当单击具有 keyCode 65 的“a”时，预期结果应该是在控制台中返回 DOM 元素“”。当我运行代码并检查它时，它在控制台中返回 null。 部分源码: wind
我正在使用 SVG.js select() 函数，它使用 querySelector() 函数。 目前，我使用的命令是:select("[id='1']")(1可以用其他数字代替) 我想做的是选择该元
我有这个循环应该设置 值为无并更新占位符。当我登录节点时它工作正常但是 value和 placeholder没有更新？怎么了？ 数据是一个 JSON 对象。 var data = {"password
我正在尝试使用 QuerySelector 获取数据表单中每个评论的值。有一个“添加”按钮，允许显示另一个元素并将元素的名称增加 +1。例如，第一个评论的名称为“comment0”，第二个评论的名称为
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
我有一个具有以下格式类的输入字段: some_starting_constant_string somevariablestring some_ending_constant_string 所以我想要
我正在寻找一种方法来查找包含以给定字符串开头的属性的所有元素。例如: document.querySelectorAll('[ng-*]') 将返回带有 Angular 指令的所有元素(ng-clic
我的第一列应该是实际日期，但我的 js 脚本仅适用于我的 html 代码中的一个类。 问题:如何使我的js代码适用于html代码中的每个类，我使用querySelector()，但我应该使用类似$(t
有没有办法使用 CSS 选择器来选择出现在给定元素之后的元素。 假设我有一个像这样的 DOM A next span the target next span
我是一名优秀的程序员,十分优秀！