个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
取决于 <template> 的内容，我想将其内容包装在一个容器中，以便更容易/一致地遍历。如果内容是<style>和 <one-other-element>在顶层，我会保留它。否则，里面的任何东西都会被包裹在 <div> 中。 .
最初我让我的代码是这样的:
var hasCtnr = template.content.querySelector(':scope > :only-child, :scope > style:first-child + :last-child') != null;
hasCtnr一直是
false .所以，我做了一个
reduced test case (jsfiddle) .如您所见，
:scope适用于常规 DOM 元素。但是，它似乎不适用于
DocumentFragment s。
我知道这项技术是新的/实验性的，但这是一个错误还是我做错了什么？
var hasCtnr = !!$(template.content).children(':only-child, style:first-child + :last-child').length;
var nonTmplResult = document.querySelector('#non-template-result');
var tmplResult = document.querySelector('#template-result');
var grandparent = document.querySelector('#grandparent');
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');
var who = grandparent.querySelector(':scope > div');
if (who === parent) {
nonTmplResult.innerHTML = 'parent as expected, :scope worked';
} else if (who === child) {
nonTmplResult.innerHTML = "child (unexpected), :scope didn't work";
}
var tmpl = document.querySelector('template');
var content = tmpl.content;
var proto = Object.create(HTMLElement.prototype);
var hasCtnr = content.querySelector(':scope > div'); // this and even ':scope div' results in null, 'div' results in DIV
tmplResult.innerHTML += hasCtnr == null ? "null for some reason, :scope didn't work" : hasCtnr.nodeName + ', :scope worked'; // Why is this null..?
tmplResult.innerHTML += '<br/>';
proto.createdCallback = function() {
var clone = document.importNode(content, true);
var root = this.createShadowRoot();
root.appendChild(clone);
var rootHasCtnr = root.querySelector(':scope > div'); // ':host > div' seems to work but I prefer this check to happen once (above) so createdCallback can be efficient as I'll likely have many custom elements
tmplResult.innerHTML += rootHasCtnr == null ? "null again, :scope didn't work" : rootHasCtnr.nodeName + ', :scope worked'; // Why is this also null..?
};
document.registerElement('x-foo', { prototype: proto });#non-template-result {
background: red;
color: white;
}
#template-result {
background: green;
color: springgreen;
}
* /deep/ * {
margin: 10px;
padding: 5px;
}
#grandparent {
display: none;
}<div id="grandparent">
<div id="parent">
<div id="child"></div>
</div>
</div>
<div id="non-template-result">????</div>
<div id="template-result"></div>
<x-foo>
<p>I should be dark golden rod with khaki text.</p>
</x-foo>
<template>
<style>
:host {
background: blue;
display: block;
}
:host > div > p {
color: white;
}
::content > p {
background: darkgoldenrod;
color: khaki;
}
</style>
<div>
<p>I should be blue with white text</p>
<content></content>
</div>
</template>
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>最佳答案
在声明中:
var hasCtnr = template.content.querySelector(':scope > :only-child' ) //...
:scope伪类表示调用
querySelector() 的元素.
template.content )不是元素(没有根元素，没有容器)根据定义，它的
localName属性未定义。
var df = document.createDocumentFragment()
df.appendChild( document.createElement( 'div' ) )
var res = df.querySelector( ':scope div' )
console.info( 'df.localName is %s', df.localName )
console.info( 'df.querySelector( :scope div ) returns %s', res )<div> ，执行调用，然后关闭或使用
<div>根据结果。
关于css-selectors - <template> + querySelector 使用 :scope pseudo class works with document but not documentFragment，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32091848/
24
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
我是一名优秀的程序员,十分优秀！