创建和使用自定义HTML组件？ [英] Create and Use a Custom HTML Component?
问题描述
我有以下的本地html：
< html>
< head>
< link rel =importhref =https://mygithub.github.io/webcomponent/>
< / head>
< body>
<！ - 这是我尝试创建的自定义html组件 - >
< img-slider>< / img-slider>
< / body>
< / html>
以及以下模板尝试：
<模板>
< style>
.redColor {
background-color：red;
}
< / style>
< div class =redColor>天空是蓝色的< / div>
< / template>
< script>
//抓住我们的完整的滑块标记和样式的模板
var tmpl = document.querySelector（'template'）;
//为扩展HTMLElement的新元素创建一个原型
var ImgSliderProto = Object.create（HTMLElement.prototype）;
//设置我们的Shadow DOM并克隆模板
ImgSliderProto.createdCallback = function（）{
var root = this.createShadowRoot（）;
root.appendChild（document.importNode（tmpl.content，true））;
};
//注册我们的新元素
var ImgSlider = document.registerElement（'img-slider'，{
prototype：ImgSliderProto
}）;
< / script>
如这篇文章。当我运行代码时，我得到：
未捕获的TypeError：无法读取HTMLElement.ImgSliderProto的属性'content'为null
.createdCallback（（index）：20）
换句话说 document.querySelector（'template'）; 返回null。什么给了？
我的目标是创建自定义html元素并将其显示在链接模板代码的网站上。我100％肯定我正在拉远程模板代码（显然，因为我在该代码中出现错误）。
我使用的是最新的Chrome浏览器，因此我不需要使用polyfills。
试试这个：
var tmpl =（document.currentScript || document._currentScript）.ownerDocument.querySelector（'template'）;
您遇到的问题是模板不是的一部分，文档，但它是 currentScript 的一部分。由于polyfills和浏览器的差异，您需要检查 currentScript 和 _currentScript 才能正常工作。
另请注意，HTML Imports绝不会完全跨浏览器。大多数Web组件正在转向基于JavaScript的代码，并且将使用ES6模块加载来加载。
有些东西可以帮助在JS文件中创建模板。使用反引号（`）是一种合理的方式：
var tmpl = document.createElement（'template'）;
tmpl.innerHTML =`< style>
.redColor {
background-color：red;
}
< / style>
< div class =redColor>天空是蓝色的< / div>;
I have the following local html:
<html>
<head>
<link rel="import" href="https://mygithub.github.io/webcomponent/">
</head>
<body>
<!-- This is the custom html component I attempted to create -->
<img-slider></img-slider>
</body>
</html>
and the following attempt at a template:
<template>
<style>
.redColor{
background-color:red;
}
</style>
<div class = "redColor">The sky is blue</div>
</template>
<script>
// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template');
// Create a prototype for a new element that extends HTMLElement
var ImgSliderProto = Object.create(HTMLElement.prototype);
// Setup our Shadow DOM and clone the template
ImgSliderProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
};
// Register our new element
var ImgSlider = document.registerElement('img-slider', {
prototype: ImgSliderProto
});
</script>
As described in this article. When I run the code, I get:
Uncaught TypeError: Cannot read property 'content' of null at HTMLElement.ImgSliderProto.createdCallback ((index):20)
In other words document.querySelector('template'); returns null. What gives?
My goal is to create custom html element and display it on the website that links the template code. I am 100% sure I am pulling the remote template code correctly (obviously, since I get the error in that code).
P.S. I am using latest Chrome, so I shouldn't need polyfills.
Try this:
var tmpl = (document.currentScript||document._currentScript).ownerDocument.querySelector('template');
The problem you ran into is that the template isn't really part of document but it is part of the currentScript. Due to polyfills and browser differences you need to check for currentScript and _currentScript to work correctly.
Also be aware that HTML Imports will never be fully cross browser. Most web components are moving to JavaScript based code and will be loaded using ES6 module loading.
There are things that help create templates in JS files. Using the backtick (`) is a reasonable way:
var tmpl = document.createElement('template');
tmpl.innerHTML = `<style>
.redColor{
background-color:red;
}
</style>
<div class = "redColor">The sky is blue</div>`;
这篇关于创建和使用自定义HTML组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
