我正在使用这段代码:
function setShadowDOM(i, css){
[].forEach.call(document.getElementsByTagName(i), function(hostVal) {
var _root = hostVal.createShadowRoot();
_root.innerHTML = '<style>:host ' + css + '</style><content></content>';
})
}
我也读这个.
怎么解决这个？会有什么选择？
最近，我一直在使用ContentEditable开发一个简单的编辑器。该应用程序的要求很简单，唯一的例外是能够插入受常规编辑操作保护的文本块。
这些文本块无法编辑，并且必须表现为单个字符，才能在其中移动光标或将其删除。
生成的HTML的示例如下所示：
<div id="editor" contenteditable style="height: 400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
"This is standard text with a "
<span class="attrib">
#shadow-root
"PROTECTED"
"_"
</span>
" block"
</div>
尽管这提供了我需要的受保护文本部分，但它有两个主要问题我无法解决：
有没有更好的方法可以做到这一点，还是无法以这种方式使用影子DOM？
我想知道是否有一种方法可以获取模板标记中元素的内容并将其作为字符串返回？目前，似乎正在沿线返回一些[object document fragment]内容，但只需要其中的html内容。
function CreateWidget(widget) {
//Check if browser supports templates
if ('content' in document.createElement('template')) {
//Grab the template's content and assign it to a variable so we only have the gut of the template
var widgetContent = document.querySelector('#panel-template').content //('#panel-template').get(1).setAttribute('id', widget.WidgetCode);
widgetContent.querySelector('#chart').setAttribute('id', widget.WidgetCode);
//get the overlay toolbar
var widgetOverlay = widgetContent.querySelector('.overlayed');
widgetOverlay.setAttribute('data-render', widget.WidgetCode);
widgetOverlay.setAttribute('data-chartType', widget.chartType);
widgetOverlay.setAttribute('data-devID', widget.deviceID);
widgetOverlay.setAttribute('data-metricType', widget.metricType);
widgetOverlay.setAttribute('data-title', widget.WidgetName);
var el = document.importNode(widgetContent, true);
alert(el);
}
}
我正在开发一个HTTP服务器作为Chrome应用程序,但我不知道如何解释陷入的错误代码:
chrome.sockets.tcp.onReceiveError.addListener( (info) =>
console.error( "Error on Receive: socket=%s, resultCode=%s", info.socketId, info.resultCode )
)
有时我会得到以下错误info.resultCode = -100(当连接超时时).
我发现了一些Unix /套接字代码,但它们似乎不匹配,我在Google的Chrome App Dev网站上找不到任何内容.
这一个和这个可以匹配,但我不确定.例如,使用该注释的错误列表,我可以猜测error 10064是对应于我的-100 resultCode.
有人可以指导我找到正确的文件吗？
我正在开发一个应用程序,我将其他html网页加载到当前页面.其他网页是独立的应用程序.我正在尝试在shadow DOM中加载网页.为此,我使用了以下代码,它将尝试在shadowRoot中导入test-template.html.这里我没有使用模板标签,因为我要动态渲染模板(使用ajax).
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="loadTemplate()" value="Load template">
<div id="template-holder"></div>
<script>
function loadTemplate() {
var templateUrl = "test-template.html",
templateReceivedCallback = function(response) {
var div = document.getElementById('template-holder'),
shadowRoot = div.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML = response;
};
$.get(templateUrl, templateReceivedCallback);
}
</script>
</body>
test-template.html将如下所示:
<div>Hello from template</div>
<script>
alert("this text is from script inside of template")
</script>
我能够在当前页面中加载提到的test-template.html,但是test-template.html里面的javascript没有执行.有没有办法让脚本运行？如果是,请分享正在运行的示例.谢谢.
我是网络组件的新手.我检查了一些例子,但我真的无法弄清楚如何加载(插入DOM)一个单独的Web组件的内容.从这个例子开始,我把这段代码放在一个名为my-element.html的文件中:
<template id="my-element">
<p>Yes, it works!</p>
</template>
<script>
document.registerElement('my-element', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.querySelector('#my-element');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
});
</script>
这是我的index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>my titile</title>
<link rel="import" href="my-element.html">
</head>
<body>
Does it work?
<my-element></my-element>
</body>
</html>
我在使用最新的Chrome 56,所以我不需要填充.我运行polyserve,只有"它有效吗？" 出现.我尝试(像原始示例)"customElements.define"语法而不是"document.registerElement",但不起作用.你有什么想法吗？如果我不想使用影子dom,我还能改变什么？
谢谢
javascript web-component html5-template custom-element html-imports
我在 DocumentFragment 内部工作，并试图将 HTML 插入其中。我们知道 DocumentFragment 没有innerHTML setter，所以我尝试在DocumentFragment 中插入一个临时节点并在它之后使用 .html 插入HTML insertAdjacentHTML。然后我会删除临时元素，并留下一个带有我想要的 DOM 的片段。
示例：（错误是故意的）
var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));
// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);
// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');
fragment.removeChild(temporaryElement);我可以清楚地看到临时元素有一个 parentNode，那么为什么会出现这个错误呢？
我一直在阅读<template>标签上的文档，但似乎无法理解它与仅使用<div>that是什么区别。display: none;
文档：模板标签
<template> 例
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
VS的
<div>例子
<div id="productrow" style="display: none">
<tr>
<td class="record"></td>
<td></td>
</tr>
</div>
PS：我知道浏览器兼容性差异
我正在尝试使用 shadow DOM 修改两个自定义 HTML 元素“输出屏幕”和“自定义计算器”的样式。
当我尝试通过附加如下所示的 shadow DOM 来执行此操作时，未应用样式。任何想法我做错了什么？
<custom-calculator id="calculator">
<output-screen></output-screen>
</custom-calculator>
<script>
var o = Object.create(HTMLElement.prototype);
var oElement = document.registerElement('output-screen', {
prototype: o
});
var c = Object.create(HTMLElement.prototype);
var cElement = document.registerElement('custom-calculator', {
prototype: c
});
var calc = document.querySelector('#calculator')
calc.attachShadow({ mode: 'open' });
calc.shadowRoot;
calc.shadowRoot.innerHTML = `
<style>
output-screen{
display:inline-block;
background-color:orange;
width:50%;
height:100vh;
}
custom-calculator {
display:inline-block;
background-color:grey;
width:100%;
height:100vh;
vertical-align:top;
}
</style>
`;
</script>
是否可以实例化Web组件而无需将其注册到 CustomElementRegistry？考虑一个简单的组件：
export class MyCustomElm extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot!.innerHTML = `
<div>Hello world</div>
`;
}
}
// Is it really required?
customElements.define('my-custom-elm', MyCustomElm);
我正在使用故事书来构建Web组件库。所有示例/演示都是Web组件。该代码将始终使用构造函数语法，即new MyCustomElm()初始化组件。永远不会通过纯HTML使用它。
我试图不注册该元素，但它似乎不起作用。如果在不注册组件的情况下调用了构造函数，则会引发异常。由于演示组件很多，因此想出唯一的名称很快变得很麻烦。
或者，是否有任何方法可以将Storybook用于Web组件，而不必为故事设置额外的Web组件？ （我尝试了DOM操作，但它也一发不可收拾。）
使用最新的Chromedriver可执行文件运行Selenium-Webdriver 的说明性示例时发生错误.Chrome已正确启动,但控制台中出现错误.
我使用的是Windows 10.
run>>regedit>>Chrome.
Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Google\Chrome ::
我只能得到这条道路.
HKLM\SOFTWARE\Policies\Google\Chrome:: 这条路是不可用的.
2212:9152:0703/185315.194:ERROR:install_util.cc(589)] Unable to create registry key HKLM\SOFTWARE\Policies\Google\Chrome for reading result=2 [2212:196:0703/185315.598:ERROR:cache_util_win.cc(20)] Unable to move the cache: 5 [2212:196:0703/185315.598:ERROR:cache_util.cc(134)] Unable to move cache folder C:\Users\Anchal\AppData\Local\Google\Chrome\User Data\ShaderCache\GPUCache to C:\Users\Anchal\AppData\Local\Google\Chrome\User Data\ShaderCache\old_GPUCache_000 [2212:196:0703/185315.598:ERROR:disk_cache.cc(169)] Unable to create cache
javascript ×9
html ×4
shadow-dom ×4
css ×2
jquery ×2
dom ×1
error-code ×1
html-imports ×1
html5 ×1
registry ×1
sockets ×1
tcp ×1