这个问题更多的是针对用户创建的shadow DOM元素,但是对于可访问性,我将使用date输入类型来解决这个问题:
比方说,date我的页面上有一个输入.编辑完几个位后,阴影DOM标记(使用Chrome)看起来像:
<input type="date">
#document-fragment
<div pseudo="-webkit-datetime-edit">
<div pseudo="-webkit-datetime-edit-fields-wrapper">
<span role="spinbutton">dd</span>
<div pseudo="-webkit-datetime-edit-text">/</div>
<span role="spinbutton">mm</span>
<div pseudo="-webkit-datetime-edit-text">/</div>
<span role="spinbutton">yyyy</span>
</div>
</div>
<div></div>
<div pseudo="-webkit-calendar-picker-indicator"></div>
与date输入相关的方法和属性似乎根本没有引用shadow DOM(JSFiddle),所以我想知道如何(如果有的话)可以访问这些shadow DOM元素？
对于Web组件,人们想要创建和覆盖的元素之一是<input>.输入元素很糟糕,因为它们很多东西取决于它们的类型而且通常难以定制,因此人们总是想要修改它们的外观和行为是正常的.
两年前或多或少,当我第一次听说Web组件时,我非常兴奋,我想要创建的第一种元素是自定义输入元素.现在规范已经完成,看起来我对输入元素的需求没有得到解决.Shadow DOM应该允许我改变它们的内部结构和外观但是输入元素被列入黑名单并且不能有阴影根,因为它们已经有一个隐藏的.如果我想添加额外的逻辑和行为,带有is属性的自定义内置元素应该可以解决问题; 我无法做影子DOM魔法,但至少我有这个,对吧？好吧Safari不会实现它,聚合物不会因为这个原因而使用它们,它们的气味就像很快就会被弃用的标准.
所以我留下了正常的自定义元素; 他们可以使用shadow DOM并拥有我想要的任何逻辑,但我希望它们是输入!他们应该在一个内部工作<form>,但如果我是正确的,表单元素不喜欢它们.我是否必须编写自己的自定义表单元素,以复制本机的所有内容？我必须告别FormData,验证API等吗？我是否失去了使用没有javascript工作的输入表单的能力？
在Chrome中,可以从开发工具中清除Service Worker缓存.
我们怎样才能在Firefox中实现这一目标？
我到目前为止尝试过:
about:serviceworkersabout:preferences#privacy Ctrl + F5但它还在那里......
我正在寻找最符合标准/面向未来的前端HTML模板方法.
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
有没有人知道是否已经存在任何好的JavaScript polyfill使 <template>元素可以跨浏览器方式使用？最好符合本标准.
根据HTML5Rocks指南,这些模板具有以下属性:
<head>,<body>或<frameset>"我认为用JavaScript polyfill纯粹实现所有这四个属性是不可能的,因此任何解决方案都只是部分解决方案.
在Web组件中,要注册元素,只需键入:
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
要创建元素,您可以执行以下操作之一:
<x-foo></x-foo>
var xFoo = new XFoo();
document.body.appendChild(xFoo);
var xFoo = document.createElement( 'x-foo')
document.body.appendChild(xFoo);
这一切都很好,花花公子.当您谈论扩展现有元素时,问题就开始了.
var XFooButton = document.registerElement('x-foo-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
问题1:为什么重复？在这里,'button'应该足够了(特别是因为它很容易计算元素的原型Object.getPrototypeOf(document.createElement(tag));
问题2:内部如何使用该信息？例如,如果您拥有prototype: Object.create(HTMLFormElement.prototype和extends: 'button'(后面的内容extends与原型传递不匹配)会发生什么
要创建一个,您可以执行以下操作之一:
<button is="x-foo-button"></button>
var xFooButton = new XFooButton();
document.body.appendChild(xFoo);
var xFooButton = document.createElement('button', 'x-foo-button');
document.body.appendChild(xFooButton);
问题3:因为很明显x-foo-button扩展了button,为什么我们在使用时必须指定它们document.createElement()？我怀疑那是因为document.createElement()只是创建一个带语法的标签<button is="x-foo-button"></button>,这让我想到了下一个问题:
问题4 …
我是网络开发的新手,最近我看到很多关于Custom Elements v1的辩论和讨论.它们允许您使用自己的自定义行为定义自己的元素,如果使用Shadow DOM,则使用范围样式.
当我在这个网站上了解它时,我不理解"自定义元素反应"下的表格.任何人都可以解释使用"构造函数"和"connectedCallback"以及术语"创建或升级"和"插入DOM"之间的区别吗？
有关额外信息,我的自定义元素的定义位于单独的文件中,它使用shadow DOM.我使用HTML Import将元素的定义导入主文档.
我有这种情况,我正在尝试<template>在我的html源代码中使用该标记:
<template id="some-id">
<div id="content-container">
<span>{{some_string}}</span>
<div>
</template>
这最终将模板放在文档中,但不认为它在DOM中.这意味着在支持模板标记的浏览器中找不到$("#content-container").如果我搜索:
$("#some-id")
我得到了回报:
<template id=?"some-id">?
#document-fragment
<div id="content-container">
<span>{{some_string}}</span>
<div>
</template>?
这些都不会让我感到惊讶.我需要知道的是克隆文档片段的内容并拥有一个新节点,然后我可以将其放在我想要的DOM中.
我已经找到了如何使用jQuery实现这一点的示例,但是围绕这些内容的大部分代码已经在使用jQuery,我需要知道如何使用jQuery来执行此操作.
我的第一个想法是获取html,然后使用它来创建一个新节点:
stuff = $("#some-id").html()
new_node = $(stuff)
这会导致以下错误:
Error: Syntax error, unrecognized expression: <the html string>
我不知道错误是否是由胡子语法引起的.我认为必须有一个jQuery解决方案来解决这个问题,但是当我用Google搜索时,我得到了jQuery模板的大量命中,这是不同的.
有没有人有想法,答案或指向网站/页面的指针,可以帮助我完成这项工作？我试图避免拼凑一些hackish.
编辑:我最终找到了这个解决方案(我还在测试它,以确保它是一个解决方案,但它看起来很有希望);
template = $("#some-id")
content = template.html()
new_div = $("<div></div>")
new_div.html(content)
我最终得到了我以前不需要的div,但我可以忍受.但这种感觉很糟糕.有没有人有更好的方法呢？好处是它仍然可以在尚未完全适应模板标签行为的浏览器中运行.
谢谢!
我正在研究我的第一个X-Tag应用程序,在它的页面上,它表示它可以与Web组件API一起使用,例如"自定义元素,影子DOM,模板和HTML导入".
我已经开始研究我的模板,但是导入它们的最佳选择是什么,现在已经弃用了HTML Imports？
在没有任何框架的情况下使用Web Components，实现自定义事件的正确方法是什么？例如，假设我有一个x-pop-out具有自定义事件的自定义元素，pop我希望以下所有内容都能正常工作：
<x-pop-out onpop="someGlobal.doSomething()"/>
var el = document.getElementsByTagName('x-pop-out')[0];
el.onpop = ()=> someGlobal.doSomething();
//or
el.addEventListener('pop', ()=> someGlobal.doSomething());
最后一个我知道该怎么做，但是我是否需要为每个属性和一个 getter/setter 自定义实现？另外，eval()从属性执行字符串的适当方法是什么？
有没有办法改变阴影元素中的样式？具体来说,扩展/覆盖在css 类中找到的一些属性？我正在使用名为Beanote的chrome扩展程序,自2017年4月(2017年)以来尚未更新,我想修复一个讨厌的错误.我发现一行css补丁对我来说足够了,但是我不知道如何应用它而不进入阴影元素本身并直接在开发工具中编辑这些样式.
我正在寻找一种方法:
/*global css rule*/
.the-class-name { property-name: my-value; }
覆盖这个:
/* style tag inside the shadow-root */
.the-class-name { property-name: bad-value; }
大部分的资源,我与涉及网上查询发现shadow-root override style或edit shadow-root styling有一些东西需要做:host,如果它意味着这个,不适合我的需要或喜欢否决的功能工作::shadow.
javascript ×6
html ×3
shadow-dom ×3
html5 ×2
css ×1
firefox ×1
forms ×1
html-imports ×1
jquery ×1
polyfills ×1
templates ×1
templatetag ×1
w3c ×1
x-tag ×1