html5 – 将样式导入Web组件

前端之家收集整理的这篇文章主要介绍了html5 – 将样式导入Web组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
将样式导入Web组件的规范方法是什么?

以下是一个错误HTML元素< link>在阴影树中被忽略:

<template>
    <link rel="style" href="foo.css" />
    <h1>foo</h1>
</template>

我使用以下方法使用shadow DOM插入它:

var importDoc,navBarProto;

importDoc = document.currentScript.ownerDocument;

navBarProto = Object.create(HTMLElement.prototype);
navBarProto.createdCallback = function() {
  var template,templateClone,shadow;

  template = importDoc.querySelector('template');
  templateClone = document.importNode(template.content,true);

  shadow = this.createShadowRoot();
  shadow.appendChild(templateClone);
};

document.registerElement('my-nav-bar',{
  prototype: navBarProto
});

解决方法

现在直接< link>阴影dom支持tag.

可以直接使用:

<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">

它已被whatwg和W3C批准.

在阴影dom中使用css的有用链接

> https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree
> https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c
> https://github.com/w3c/webcomponents/issues/628

直接css链接可用于阴影dom.

猜你在找的HTML5相关文章