custom-element | 易学教程

How do you decouple Web Components?

阅读更多关于 How do you decouple Web Components?

问题 I'm trying to work frameworkless, with pure javascript Web Components. I want my Web Components to be able to work stand-alone and be used on different sites, and yet I also want two components to be able to communicate. So they should be able to communicate without being tightly coupled. Back when I did Angular, this was easy. I can pass objects to a component through a HTML attribute, and the component receives it as an object rather than a string. But in pure javascript, attributes are

How to stamp out template in self contained custom elements with vanilla js?

阅读更多关于 How to stamp out template in self contained custom elements with vanilla js?

问题 I have a custom component that just shows a tarot card. Before the custom element I have defined a template. In my wc's connectedCallback I attached the template itself to the shadowroot and then stamped it out by cloning it there in the shadowroot as well. I did this for 2 reasons: I want my wc component to be a self contained module; therefore I want to define my template in the same place as my custom element. It seems to be the only way to stamp out my template to make it usable without

Disqus comments don't work in a polymer custom element

阅读更多关于 Disqus comments don't work in a polymer custom element

问题 I don't know how to make a disqus comments code to work inside of my custom elements. Structure of my site: | index.html --------\ my-app.html (custom element) ----------------\ my-testView1.html (custom element) ----------------\ my-testView2.html (custom element) I need to put disqus comments inside my-testView1.html and my-testView2.html Structure of index.html : <body> <my-app> <div class="disqusClass1" id="disqus_thread"></div> <div class="disqusClass2" id="disqus_thread"></div> <my-app>

How to get a callback when a custom element and it's children have been initialized

阅读更多关于 How to get a callback when a custom element *and it's children* have been initialized

问题 I'm nesting custom elements. I'd like to have my parent custom element use methods and properties from its child custom element's prototype. E.g. <script> var ChildElement = Object.create(HTMLElement.prototype); ChildElement.getName = function () { return "Bob"; } document.registerElement("child-element", { prototype: ChildElement }); var ParentElement = Object.create(HTMLElement.prototype); ParentElement.createdCallback = function () { var self = this; setTimeout(function () { // This logs

How to get list of registered custom elements

阅读更多关于 How to get list of registered custom elements

问题 I'm trying to detect whether a custom element with a specific name was registered or not. Is there a way to make such check? Or is there a way to get list of registered custom elements? I do document.registerElement , but what else is there? Is it one-way API? 回答1: There is a way to check whether an element was registered. Registered elements have their own constructors, while unregistered ones would use plain HTMLElement() for constructor (or HTMLUnknownElement() whether the name is not

How to get list of registered custom elements

阅读更多关于 How to get list of registered custom elements

Create a Custom Element with different sub-types

阅读更多关于 Create a Custom Element with different sub-types

问题 I am currently implementing a data-table element using custom elements (web components). The table can have different types of cells (text, number, date, etc) that are used to render each row. E.g <my-table> <my-table-cell-text column="name"></my-table-cell-text> <my-table-cell-date column="dob" format="YYYY-MM-DD"></my-table-cell-date> <my-table-cell-number column="salary" decimals="2"></my-table-cell-number > </my-table> I also have a MyTableCell class which all cell elements extends. This

Custom input element in native form

阅读更多关于 Custom input element in native form

问题 With web components one of the elements that people want to create and override most is <input> . Input elements are bad because they are many things depending on their type and usually hard to customize, so it's normal that people always want to modify their looks and behavior. Two years ago more or less, when I first heard of web components, I was pretty excited and the first kind of elements that came to my mind that I wanted to create were custom input elements. Now that the spec is

How to get Polymer 2.0 ES5 elements working with v1 spec?

阅读更多关于 How to get Polymer 2.0 ES5 elements working with v1 spec?

问题 I've successfully built a number of Polymer 2.0 elements and they run great in ES6 capable browsers. When I try to transpile them to ES5, the browser throws a bunch of errors, like these: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. After some research, it looks like you need a native-shim, which comes along with the webcomponentsjs-es5-loader, but after switching to that now I'm getting a new error: Class

Angular Elements: @Input decorator not working with variables

阅读更多关于 Angular Elements: @Input decorator not working with variables

问题 I have several separated web components, made with angular elements, that I import in a main one, which has a router and is the base application. Routes are pretty simple: import { Component } from '@angular/core'; import { Router } from "@angular/router"; @Component({ selector: 'example', template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>', styles: [] }) export class ExampleComponent { public toPass: string = "Hello World!"; constructor(private