html5-template

web component (vanilla, no polymer): how to load <template> content?

由 风流意气都作罢 提交于 2019-11-27 04:53:20
问题 i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from this example , I put this code in a file named 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')

How to let imported css have effects on elements in the shadow dom?

由 耗尽温柔 提交于 2019-11-27 02:11:36
Say if I want to create a custom element using shadow dom. Some elements in the template have class names specified in the linked css file. Now I want to let the css rules have effects on the elements. But I can't achieve that because of the shadow dom style boundary. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <template id="blog-header"> <header> <h1>DreamLine</h1> <nav> <ul> <li><a href="#0">Tour</a></li> <li><a href="#0">Blog</a></li> <li><a href="#0">Contact</a></li> <li><a href="#0">Error</a></li> <li><a href="

Vanilla web-component structure

由 大城市里の小女人 提交于 2019-11-26 23:25:15
问题 I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components if possible but can't work out how. I've taken the code from here and added it to a file which I am using as follows: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

What is the ::content/::slotted pseudo-element and how does it work?

由 我只是一个虾纸丫 提交于 2019-11-26 18:23:50
This is impossible to Google for because every article talking about the :before and :after pseudo-elements seems to use the word 'content'. I heard about it in this CSS-Tricks article, explaining how to implement an image slider as an example use-case for web components. The code example it appears inside is thus: CSS #slides ::content img { width: 25%; float: left; } HTML <template> ... <div class="inner"> <content select="img"></content> </div> </template> It seems to be referring to this <content> tag, which is used to allow the user to include Web Components, but I would love to

Nested element (web component) can&#39;t get its template

由 旧巷老猫 提交于 2019-11-26 15:28:44
I made a simple example using Web Components with two custom elements (v1) where one is nested in another. 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

How to let imported css have effects on elements in the shadow dom?

由 心不动则不痛 提交于 2019-11-26 09:59:35
问题 Say if I want to create a custom element using shadow dom. Some elements in the template have class names specified in the linked css file. Now I want to let the css rules have effects on the elements. But I can\'t achieve that because of the shadow dom style boundary. <link rel=\"stylesheet\" type=\"text/css\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"> <template id=\"blog-header\"> <header> <h1>DreamLine</h1> <nav> <ul> <li><a href=\"#0\">Tour</a><

What is the ::content/::slotted pseudo-element and how does it work?

由 浪子不回头ぞ 提交于 2019-11-26 06:16:59
问题 This is impossible to Google for because every article talking about the :before and :after pseudo-elements seems to use the word \'content\'. I heard about it in this CSS-Tricks article, explaining how to implement an image slider as an example use-case for web components. The code example it appears inside is thus: CSS #slides ::content img { width: 25%; float: left; } HTML <template> ... <div class=\"inner\"> <content select=\"img\"></content> </div> </template> It seems to be referring to
订阅 html5-template