Questions tagged [custom-element]

Custom Elements are a feature of HTML that provide a way for you to build your own fully-featured DOM elements and use them in your HTML markup, CSS stylesheets, and JavaScript code

Custom Elements are natively supported in all browsers, but for browsers that don’t yet implement them natively, some support is available through the use of a JavaScript polyfill.

Latest changes in Javascript / Ecmascript 2017, allow you to easily create HTML custom elements in an OOP like fashion that makes your code clear and your HTML mark-up more intuitive.

See also:

For a gallery of available custom elements check out WebComponents

973 questions
0
votes
1 answer

How to use #Polymer core-animated-pages transitions to tile-cascade custom elements?

I am trying to replicate the slide-up and tile-cascade transitions seen here using this jist with the polymer designer tool The difference here is I want to use custom elements instead of tags. I created custom elements for each page and placed…
O Red
  • 145
  • 2
  • 13
0
votes
1 answer

Polymer HTML Import into Custom Element

Hey I'm beginning with Webcomponents and I built a little HTML Import Example, where I import a calander from another Website with VanillaJs and it works perfekt. As the 2. Step I wanted to HTML import into a Polymer element, so that I can use the…
Any1
  • 182
  • 2
  • 15
0
votes
1 answer

adding image to the custom element in Dart lang

I'm making a fab icon custom element, like the one in the material design, and want to add image (icon image), but could not. I tried 3 approachs: Adding .src to the shado.host Adding .src to ImageElement Adding .src to ButtonElement I also tried…
Hasan A Yousef
  • 22,789
  • 24
  • 132
  • 203
0
votes
1 answer

How to select extended custom elements

I created a custom element following this example and now extended-item doesn't work anymore as a css selector though. Before: After:
Renaud
  • 4,569
  • 7
  • 41
  • 72
0
votes
0 answers

detect unresolved elements in polymer-polyfilled browser

I'm trying to detect if a custom element has been registered yet, e.i if it is still unresolved. In a browser that supports custom-element (e.g Chrome) I can do that by checking that is it is not an instance of HTMLUnknowElement and that it doesn't…
ulybu
  • 65
  • 5
0
votes
1 answer

Custom elements not sizing properly

I've created a custom element to handle some data passing, which it does perfectly. At this point, I'd like to add some styling to enable my custom elements to act kind of like divs. Specifically, I've got a table in one of them, and I don't want it…
ckersch
  • 7,507
  • 2
  • 37
  • 44
-1
votes
1 answer

How can I create a custom HTML element with accessibility

How can I create a custom HTML element that can be styled with CSS and have specific behaviors, such as click events, proper semantics, and accessibility? Are there any best practices for defining specific behaviors for custom HTML elements using…
Brantes
  • 3
  • 2
-1
votes
1 answer

Angular Problem with mat-form-field/mat-label

I started learning Angular Materials, and I have a problem with adding example from their site. To my html file I added: Clearable input
-1
votes
1 answer

'createTHead' called on an object that does not implement interface HTMLTableElement

I am trying to create a custom Web Component that extends the HTMLTableElement class. The code is relatively simple: class DataTable extends HTMLTableElement { constructor() { super(); this.data =…
JLCarveth
  • 93
  • 8
-1
votes
1 answer

Custom Elements rendering once only

I want to be able to create reusable custom elements. With my current implementation, each of the custom elements renders only once. All the elements (all 4) are injected into the DOM, but only the first instance of each is rendered. I have tried…
go4cas
  • 1,171
  • 5
  • 14
  • 27
-1
votes
1 answer

Do the javascript custom elements constructors share the same memory?

When I define a custom element like this: customElements.define( "my-tag", class extends HTMLElement { constructor() { var data = {}; ... When I use the element multiple times, like:
vuco
  • 161
  • 2
  • 6
-1
votes
1 answer

HTML/JS: Extending/Overriding native html elements

Due to many limitations in native html elements, I am wondering if it is possible to extend a native html element using web components and have my own customized behavior. I've seen a pages on this but the examples are very simple and weak such as…
-1
votes
1 answer

Custom Element returning incorrect offset when position is "relative:

Code: https://jsfiddle.net/q157xktz/1/ when the position of this custom element is set to relative, the offset displays correctly. For example, if the true offset is 0 it displays as 25. Why is this? The element in question is root-class-bubble
-1
votes
1 answer

Custom Elements rendering multiple times

I am currently having an issue with custom elements, I am building some custom stuff to go on an ecommerce website and one of my custom elements is re-rendering itself multiple times. window.initDealBadge = function(customer) { class…
Robert Templeton
  • 139
  • 1
  • 2
  • 9
-1
votes
1 answer

Javascript on click focus latest element with multiple customelements

I have a customelement WebDesktop that can create another customelement AppWindow. If I create several AppWindow I would like the one I clicked the last to be "focused" when it's created but also that if I click on an already created one it should…
FatDog
  • 153
  • 1
  • 9
1 2 3
64
65