Questions tagged [web-component]

0

votes
0

answer
4

Views

How to properly use slot inside of vue js web component and apply styles

I have come across an issue where the implementation of slots in a webcomponent is not functioning as expected. My understanding of Web Components, Custom Elements and Slots is that elements rendered in a slot should inherit their style from the document and not the Shadow DOM however the element in...
Adam H
1

votes
3

answer
184

Views

textContent empty in connectedCallback() of a custom HTMLElement

Within the connectedCallback() method of my custom element the textContent is returned as an empty string. Essentially my code boils down to the following... class MyComponent extends HTMLElement{ constructor() { super() console.log(this.textContent) // not available here, but understandable }...
Jonathan Williamson
1

votes
1

answer
249

Views

Shadow dom hides innerHTML

when creating a custom element with shadow dom, and setting the element's innerHTML it isn't displayed. Why? and is there away to way to prevent this from happening? //JS Code export default class VideoPlayer extends DomElement { constructor() { super(); const mountPoint = document.createElement('di...
Shai Kimchi
1

votes
1

answer
215

Views

Hidden router view breaks databinding - Aurelia

I would like to conditionally show a login page, but encountered an issue. I reproduced it with the the official aurelia skeleton application by changing app.html to the following: Not logged in, show login page The problem is that the router object no longer is defined, and therefore the navbar doe...
Simon Bengtsson
1

votes
2

answer
1.3k

Views

HTML Templates and HTML Import - Inner Script not Executing in Firefox

I am using webcomponents.js to polyfill Firefox support of web components. When loading an HTML template through an HTML import, a script within the template does not execute once the custom-element based on the template is added to the DOM of the main page. It does execute when running the site in...
nepdev
1

votes
1

answer
60

Views

Data is lost when passing it down more than two components

I've got three Polymer-components (Polymer 1.2). They all sit in their own files therefore is-logged-in and login-name have to be passed from one component to another. I put them together here so you can understand my problem more easily: All 3 components have these properties: properties: { isLogg...
Hedge
1

votes
1

answer
382

Views

How to pass attributes to help implement a custom element?

When we use web component techniques to create a custom element, sometimes the implementation of a custom element involves the use of attributes present on the resulting element in the main document. As in the following example: main doc: Title my-portrait.html: (function() { var importDoc = docum...
Zhengquan Bai
1

votes
2

answer
49

Views

previous custom element overwrited by next elements when import serval webcomponent

when multiple custom element in a single page, why always show the last element and the previous element is overwrited. for example: first component: webcomponent 1 var thatDoc = document; var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument; var t = thisDoc.querySelector...
aloo
1

votes
1

answer
66

Views

Why this polymer not starting with default attributes?

I'm developing my first polymer watching video tutorials. I want to start the polymer with default attributes, but the attribute keeps starting as undefined... why this is happening? my polymer: #imagens{ color: blue; } Render imgs from src here! Polymer({ is: 'x-slider', properies: { controlVisible...
lucasumberto
1

votes
2

answer
267

Views

New React module inside another react component

So if it's silly question, please excuse me. I'm using React Carousel Component (react-slick) for my project. What i want to achieve, inside this block i want to use my module 'CarouselSlide'. //--> react-slick component tag //--> my module CarouselSlide is my react module shows single carousel slid...
Erdal SATIK
1

votes
3

answer
853

Views

Polymer force a paper-input to uppercase

Hi i'me trying to find a way to have a paper-input auto uppercase the input. Do someone know where to start. Is writing a bahaviour a sollution?
user2587790
1

votes
1

answer
1.3k

Views

How to get hold of event binding attribute in Angular2 like (click) or (keyup) and insert them in new html element

My custom Polymer webcomponents malfunction with Angular2. I had to wrap them in custom directive (which delays the rendering of web components until the are inserted into the DOM by angular). Wrapping works like that: What basically happens is that directive is being hidden and I insert the befo...
Astrowie
1

votes
1

answer
57

Views

How are “Web Components” different from “jQueryUI”?

While developing our own UI component libraries for Web and Mobile which one is more preferable - web component or jQueryUI?
RDX
1

votes
1

answer
206

Views

CustomElements.js:596Uncaught TypeError: Cannot assign to read only property 'customElements' of object '#<Window>'

We are leveraging skateJS and are using webcomponent.js for polyfills. However, since the new release of Google Chrome (Version 54.0.2840.71) today, our app is throwing a fatal error. CustomElements.js:596Uncaught TypeError: Cannot assign to read only property 'customElements' of object '#'
nachopants
1

votes
1

answer
302

Views

Multiple insertion points in polymer module?

In polymer, we can create insertion points for HTML content with within custom modules like this. Surrounding HTML ... Surrounding HTML ... and then later use the module like this: foo content Can a custom element support multiple of these -based insertion points? And how?
dangerChihuahua007
1

votes
2

answer
283

Views

Polymer : Watch the changed Property from outside of an Component

I've Polymer Webcomponent. My problem is now, outside of the Component I use knockout for DataBinding scenarios. Now I wanted to create my own Knockout Binding Type, wich is able to use twoWay-Binding with Poylmer objects. For this I need to subscribe to the Property observer from outside of the com...
Jochen Kühner
1

votes
1

answer
959

Views

polymer and apache server

i'm starting to learn polymer and i have installed the starter kit, i have used polymer serve to run the code, and everything works without problems... After that i tried to use xampp (apache server in windows) and the only thing i see is the title of the web page, i have edited the references to th...
Peter
1

votes
2

answer
426

Views

Web components in vanilla JavaScript

I've created a little web component without any frameworks. This is my index.html: console.log(document.querySelector('clock-digital').cID); document.querySelector('clock-digital').method(); and this is my clock.js: customElements.define('clock-digital', class extends HTMLElement { get cID() {} set...
asv
1

votes
1

answer
271

Views

Extending Bootstrap with Webpack

I'm working on a web application which currently uses bootstrap for its front end, and webpack to bundle its assets. I've been inspired by this article to create web components which can be broken into tiny little self contained units, and this article to attempt to make my use of bootstrap more sem...
thejonwithnoh
1

votes
1

answer
309

Views

Cannot call Webcomponent method from page

I try to make a simple webcomponent (with webcomponents.js v 0.7.23). This component has a method (setTitre()). If I call this method in my HTML page at startup, Chrome is ok but FF and IE say that the function is undefined. If I call this method from the console (document.querySelector('hello-world...
Olof
1

votes
1

answer
109

Views

Nested Webcomponents “ES2015 style”, how to import nested component from outer component

I try to develop simples webcomponents in ES2015 style. Component my-action is nested into component my-action-bar. In the version who is in Github, in my client page (demo-action-bar.html), I 'import' the two components. I want to only import my-action-barin my html client page but I don't know how...
Olof
1

votes
1

answer
162

Views

Polymer Custom elements dataset is empty in Firefox

I have the impression that Firefox is 'clearing' the data-* attributes on custom elements. See the script below works in Chrome with native Web Components support, but in Firefox, it seems that once my click event handler is run, the dataset is empty. document.addEventListener('DOMContentLoaded', fu...
Andre
1

votes
1

answer
562

Views

Shadow DOM v1 styling with polyfill

I'm trying to work with just ShadowDOM v1 (no Polymer or other web components) but I can't get the styling to work with a polyfill. The special :host and ::slotted CSS selectors are not working. I've tried with various polyfills, but TBH, I'm a bit lost. I have seen this question, but it's using cus...
Phil Mander
1

votes
1

answer
144

Views

Shadow Dom and CSS3 :target selector

I should start off by saying that I don't really have an issue that I'm trying to work through. I just had an interesting thought about how Shadow Dom and the CSS3 :target selector might / should / currently do work together. I know that HTML specification says that there should only ever be one ele...
TechJosh
1

votes
1

answer
202

Views

Adding CodeMirror to Shadow Dom of Custom Element?

I'd like to dynamically create a CodeMirror instance inside a Custom Element and have it live inside the element's Shadow DOM. For example: foo window.customElements.define('code-mirror', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); } conne...
moof2k
1

votes
1

answer
638

Views

Polymer 2 app: paper-button has no text

I am very very new to Polymer, Material and Web Components I used Polymer CLI to create a polymer 2 application polymer init And then I chose polymer-2-starter-kit I tried to add some paper buttons to my view1 file, but I found out that paper-button has not added to the bower dependencies, so I adde...
ehsun7b
1

votes
2

answer
618

Views

Polymer: dom-repeat like local variable for elements

I'd like to create a control that converts the data into something I need. At the moment, I solve this with a global variable. The code looks something like this: (The lowercase functionality is only to demonstrate it in a simple way. Usually I want to use it for arrays of objects. e.g. to get disti...
CHF
1

votes
1

answer
120

Views

Insert multiple instances of a same widget into a page

I have a widget which renders a bar chart(HTML/CSS/JavaScript), after point to a particular datasource/API. There is a configuration parameter to change the datasource/API, So I can have multiple instances of the same widget. Is it possible to do above with the use of shadow-dom? I tried following b...
udarakr
1

votes
1

answer
626

Views

ReactJS: Best practice of props and state

I recently started using react-redux to build my front-end app, but while I wrote components, I felt confused on props and states. For example: states: content, type functions: changeContent, changeType, fetchResult. props: fetched_result. The structure of component: -> call axios to get result Curr...
Kir Chou
1

votes
2

answer
149

Views

Cannot get content from template

In Javascript, I am trying to dynamically create an HTML element, append an element as its child, clone the template's contents, and then append the template to the document body. The problem is when I access the content property of the template it just returns #document-fragment. Here's the code:...
Graham
1

votes
1

answer
240

Views

HTML Templates Slots and Teats on a bull

Can someone confirm, or point me to proposed documentation for, the rules for matching a Host Element's 'slot=' designator with a Template's tag? I had very much hoped that it was a simply NAME matching process regardless of depth/position of the corresponding Slots in the Light DOM versus the Shad...
McMurphy
1

votes
2

answer
141

Views

google-map-marker in dom-repeat has binding issue

i'm trying to make a polymer page with a map, in the map i'm trying to put multiple markers (easy with a dom-repeat), when i click a marker i want to show an infowindow with a component inside that accepts data from outside and displays it in some way. I'm currently having an issue trying to make th...
1

votes
1

answer
102

Views

Can Polymer's web-component-tester use the Chai API?

I have this fixture that stamps out : Within , I import and give it a class of big-btn. It's important this button exists on the element, so I want to test it with: test('does the custom cmponent exist', function() { var test = fixture('fixture-one').shadowRoot.querySelector('.big-btn'); assert.ex...
Bill
1

votes
1

answer
138

Views

Referencing light DOM within web component

I'm using skate.js and trying to reference a web component's light DOM for validation and manipulation. The component looks like this: This is res-checkbox I'm trying to reference the checkbox to validate that the it's there and add an id to it so the shadow DOM label can use reference it with the f...
bjork24
1

votes
2

answer
441

Views

Using a non-shadow DOM custom element both inside and outside the shadow DOM

I have a custom element (without shadow DOM) that I'd like to be able to use anywhere, even inside another custom element that might use shadow DOM. However, I'm not sure how to get the styles working in both places. For example, lets say I create a simple fancy-button element: class fancyButton ext...
Steven Lambert
1

votes
1

answer
205

Views

Polymer properties are not known in listener method

Recently I encountered the following problem: In my Polymer-based project I have a custom element, let's call it . This element as px-rangepicker as a dependency, which is basically just a date picker. If you select a date from that picker, the event px-datetime-range-submitted is fired. Inside my t...
sebastian
1

votes
2

answer
309

Views

React - this.setState doesn't work as expected until function is called a second time

I have a fairly basic function in my React component that isn't working as expected. The component itself is a nav bar for the top of the page. I'd like to implement a slide out menu for mobile screens triggered by a click on a hamburger icon that is inside the nav like so. For the moment I simply h...
mikeym
1

votes
1

answer
291

Views

Using the <content> tag in a shadow DOM

I'm trying to use the shadow DOM without any framework that abstracts it, mostly in order to learn its intricacies. I am using the webcomponents.js polyfills, so it works cross-browser. I've managed to create a custom element, and set its shadow DOM, but for some reason the tag isn't transcluding t...
configurator
1

votes
1

answer
222

Views

How do I get detailed message from a DOM error event

I'm trying to understand Chrome's implementation of html import such as However the error event doesn't really convey much useful message as specified in MDN . I wonder if there's any way I can get more out of the error event such as reason of failure and HTTP status code.
miushock
1

votes
1

answer
293

Views

How to get DI from “top component” inside child component in Angular?

From Angular documentation: Create a 'top component' that acts as the root for all of the module's components. Add the custom HttpBackend provider to the top component's providers list rather than the module's providers. Recall that Angular creates a child injector for each component instance and po...
ktretyak

View additional questions