自定义元素中的外部样式表(无聚合物)

时间:2017-11-25 18:17:55

标签: javascript custom-controls stylesheet elements

我正在构建自定义元素。这是我的代码:



<!DOCTYPE html>
<html>
	<template>
		<link rel="stylesheet" type="text/css" href="pols-notifier.css">
		<div class="body">
			<button class="close"></button>
			<div class="content"></div>
		</div>
	</template>

	<script>
		class PolsNotifier extends HTMLElement {
			constructor() {
				super();
				this.currentDocument = document.currentScript.ownerDocument;
			}

			connectedCallback() {
				const instance = this.currentDocument.querySelector('template').content.cloneNode(true);
				this.attachShadow({mode: 'open'}).appendChild(instance);
			}
		}
		
		window.customElements.define('pols-notifier', PolsNotifier);
	</script>
</html>
&#13;
&#13;
&#13;

页面是:

&#13;
&#13;
<!Doctype HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="import" href="http://localhost:8080/assets/pols-notifier/pols-notifier.html">
    <body>
		<pols-notifier></pols-notifier>
	</body>
</html>
&#13;
&#13;
&#13;

尝试加载样式表时,控制台显示错误。自定义元素和样式表的文件位于我的项目的/ assets / pols-notifier目录中,但导航器正在查找/pols-notifier.css。

为什么要去那儿?

问候语。感谢。

0 个答案:

没有答案