Tag: html5 template

什么是:: content / :: slotted伪元素,它是如何工作的?

这对于Google来说是不可能的,因为每篇文章都谈到:before和:after伪元素似乎都使用了“内容”这个词。 我在这篇 CSS-Tricks文章中听说过它,解释了如何实现图像滑块作为Web组件的示例用例。 它出现在内部的代码示例是这样的: CSS #slides ::content img { width: 25%; float: left; } HTML <template> … <div class="inner"> <content select="img"></content> </div> </template> 它似乎是指这个<content>标记,它用于允许用户包含Web组件,但是我更想深入了解这一点。 编辑: 在进一步阅读之后,在前面的文章中,我发现了一个链接作者的“Shadow DOM CSS Cheatsheet”,其中包含一段解释::content伪元素的内容: select元素内部的分布式节点。 需要与不支持本地select器的浏览器的polyfill-next-selector配合使用。 ::content h1 { color: red; } 资料来源: http : //robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/ 这是有帮助的,但我仍然觉得整个事情是不透明的。 任何额外的见解?

嵌套元素(Web组件)无法获取其模板

我做了一个简单的例子,使用带有两个自定义元素(v1)的Web组件,其中一个嵌套在另一个元素中。 index.html的: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="import" href="app-container.html"> </head> <body> <app-container></app-container> </body> </html> APP-container.html: <link rel="import" href="toolbar.html"> <template id="app-container"> <app-toolbar></app-toolbar> </template> <script> customElements.define('app-container', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: 'open' }); const content = document.currentScript.ownerDocument.querySelector('#app-container').content; shadowRoot.appendChild(content.cloneNode(true)); } }); […]