Questions tagged [web-component]

1

votes
1

answer
624

Views

How can I unit test a custom element

I have a class that extends HTMLElement. From reading this thread https://github.com/Microsoft/TypeScript/issues/574#issuecomment-231683089 I see that I can't instantiate a custom element with out getting a Illegal constructor. Additionally, the registerElement looked promising as it returned the...
Jonathan Fishbein
0

votes
0

answer
4

Views

LitElement How to monitor the child dom and change styling

So I have a custom element and I need to update it's styles based on a change to it's child content. For instance:
Casey Jordan
1

votes
1

answer
155

Views

Web Components: slot appears outside shadow DOM

I want to make a web component from a Element. I'm trying to get the tags supplied by the user to appear in the Shadow DOM. My component: let tmpl = document.createElement('template'); tmpl.innerHTML = ` `; class SelectBox extends HTMLElement { constructor() { super(); if (!this.shadowRoot) { this...
susdu
1

votes
1

answer
19

Views

Testing granite-ink WebComponents element using Selenium WebdriverJS

I have the following html code using the granite-ink WebComponents element: the code that I tried to test it using Selenium are: var canvas = drawing.findElement(webdriver.By.css('#inputArea')); var actions = driver.actions(); actions.mouseMove(canvas,500,100).mouseDown().mouseMove(canvas,200,60).mo...
Harvey Lin
1

votes
1

answer
401

Views

How do I get form data from iron-form to be output in view

I am new to Polymer 2 and ES6. I can console.log data that is input into the iron-form. However, I can't output it to the screen. I thought this line would achieve the goal: this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza); However, that gives me the error:...
Amanda Michel
1

votes
0

answer
170

Views

Error 404 not found : @types/[email protected]^0.0.2 while trying to install web-component-tester

In my project, we want to test our polymer components with web-component-tester. So, I try to run the following command : npm install web-component-tester --save Every time, I get the following response : 404 Not Found: @types/[email protected]^0.0.2 I don't find this version of escodegen in the internet,...
TronchDeYack
1

votes
1

answer
393

Views

Angular 4 : Strategy to divide application into components

I am new to angular and so in a project. I have the below senerio. Scenario: Onclick of 'tile1' (1st picture)... 'tile1a','tile1b','tile1c' should appear (2nd picture)... and so on. Is there a strategy which can help me know how many components and modules should my page be divided into?
Anna
1

votes
0

answer
50

Views

Web Components - How to style an overlapping component - to look like a drop down

I am new to web components. I am trying to create a web component that looks like a 'drop down / select'. when the element is closed but visible (not expanded) I would like it to be presented on the screen in the regular flow of the web page. Under it is some text that is not part of the control. Wh...
1

votes
0

answer
300

Views

Create nested custom angular web components

I am creating multiple custom web components in order to reuse them in multiple projects, which works fine. Since we want them originally to be independent, I use encapsulation: ViewEncapsulation.Native. So, each one of those web components is creating it's own shadow-root which contains the templat...
jojo____
1

votes
0

answer
80

Views

Disable ready event or dom change event in a WCT test?

In polymer 1.*, I am writing a test. My original element has a ready handler which acts on dom-change. WCT does not provide a way to stub anything in the ready handler. It also does not allow me to stub data on the host property at the time exact time the element is stamped, which the ready handler...
dman
1

votes
1

answer
79

Views

Multiple polymer 2 imports fail

I'm in a bit of a trouble and I hope that I'll find the answer here: I have an angular 5 app using polymer 2 components. First I add the elements dynamically the head of the dom like this Then the user select some elements to add to his dashboard What I do is to append the element tag to the dom lik...
malek yahyaoui
1

votes
1

answer
95

Views

Make css variables bleed to children components

I am using Polymer 2 to build a library of components, but I am having issues with css variables in browsers other than Chrome. I have a wrapper component (x-page) and it has a theme property that can be either light or dark. My css looks similar to this: :host([light]) { ---color-1: rgb(200,200,200...
1

votes
0

answer
199

Views

Drag and drop with Web Components in Safari

When dragging a Web Component in Safari 11.1 (MacOS) dragstart is immediately followed by a dragend event if dragging starts on a child in the Web Component's Shadow DOM. It works fine in Chrome and Firefox, how to enable drag and drop in Safari? This happens for Web Components build without externa...
a.xin
1

votes
0

answer
374

Views

How do I load web-components with webpack

I'm using webpack 4 with elm and trying to bring in leaflet-map as a web-component. (This is desirable because elm has a virtual dom so mixing with standard JS tends to cause a fight over the controlled elements, it also reduces the usage of ports to talk to leaflet). However I'm struggling to confi...
Jon Rowe
1

votes
0

answer
27

Views

Polymer build compress

I am generating a component application in Polymer .. as a template I used the following: https://github.com/PolymerLabs/start-polymer3. Everything works excellent, I uploaded it to firebase, the point is that I want to make 'polymer build' generate the structure of folders: build / s6-unbundled, al...
bersnard coello
1

votes
0

answer
66

Views

Web components in Angular’s template-driven forms

I am using web components from an external library brought into my Angular 6 application. These web components are using Shadow DOM. Are there any best practices for using web components inside of a template driven form in angular? I’ve tried: This at least binds the initial rendering of the form...
Ryan Munger
1

votes
0

answer
152

Views

Passing custom template to stencil component

I'm working on to create a custom component using Stencil to replicate UI-select. The component will be used like: let items = [{name:'Abc', age: 10}, {name:'Xyz', age: 10}]; let itemString = JSON.stringify(items); Then the component is defined as import { Component, State, Prop, Element, } from '@s...
Indra
1

votes
0

answer
146

Views

Problems importing some external js to a Stenciljs web component

I have been able to import some simple external js libs like moment to custom Stencil web components without any problems, but recently I wanted to build a stomp web component which depended on stomp-websocket and sockjs-client. I couldn't import either of them properly. At any variation of import I...
Roederick
1

votes
0

answer
77

Views

Web Components In firefox extension

I'm trying to use web components inside a Firefox extension but i always get errors trying to add the needed polyfills to make web components work on firefox. Polyfill using 'webcomponents/webcomponentsjs': '^2.0.3' First Attempt - webcomponents-sd-ce.js 'content_scripts': [ { 'matches':[''], 'js...
user3418177
1

votes
0

answer
276

Views

Bundle the vue dependency into a web component build using vue-cli 3

I'm using vue-cli 3 to bundle my vue components into web components, using a command simmilar like that: package.json 'build:wc': 'vue-cli-service build --target wc-async --name webcomponent-global 'src/components/*/*.vue'' This all works fine, however according to the docs you need a global vue dep...
Philip Feldmann
1

votes
0

answer
45

Views

Run Web Component Tester on HTTPs

We need to test a Polymer element in an HTTPS URL when we run $ wct, aka the Web Component Tester. We're developing an element for screensharing, which requires a Chrome screensharing browser extension which only works on HTTPS. We're aware that WCT uses Selenium under the hood so I was wondering: I...
Nik Kyriakides
1

votes
1

answer
137

Views

flush function always makes polymer test (for dom-if) pass

I am writing tests for polymer-3.x element where I am using dom-if. According to the docs, i used flush. But this does not evaluate and directly marks all tests as passed. my-element_test.html suite('display-message', () => { test('setting a property on the element works', () => { flush(function() {...
Raj
1

votes
0

answer
52

Views

Element passed in many recursive slots not showing up in bottom level element

Using Polymer 1.* and shady dom with Chrome. UPDATE: I can pass a element through 2 named slots but not 3. Does shady dom have a limit? I am having issues passing special-form-element in 's slot='card-content' and making it show in the great grandchild elements 's . The card footer with shows th...
dman
1

votes
0

answer
33

Views

Material Design not compiled when building web components | A thought towards micro front-end

I have a simple form in Vuejs. I used VueMaterial for same. Now, as a next step I would like to make this form/app/micro-app whatever we can call into a web component/shared components. My code below main.js import Vue from 'vue'; import App from './App.vue'; import VueMaterial from 'vue-material';...
kushalvm
1

votes
0

answer
60

Views

Polymer not Defined in Web Component Tester

I am trying to run two tests with web-component-tester interactively on a Polymer 2 project in Chrome v69, web-component-test v 6.5.0, and webcomponentsjs v 2.1.3. The first super basic test passes, and the second fails with the following error: Error: Polymer is not defined flush at shop-home.test...
Matthew
1

votes
1

answer
135

Views

React + Polymer: Pass through callback from React into Polymer component

I am struggling to pass in functions as properties into Polymer components. I managed to get it working when doing so from another Polymer component by using one way data binding, but when I am loading my Polymer component within a React project and try to pass in a function for the property it come...
Heather Roberts
1

votes
0

answer
11

Views

Shadow DOM not shown in Custom Element with Shadow Root when inspected on Salesforce (Rabbit hole)

I'm trying to understand how Salesforce have implemented their custom lightning component elements. I've read some of the help docs which imply they're following webcomponents standards. When I inspect the page: So this looks like typical DOM structure, but when you go into the console and look int...
DavidLBatey
1

votes
1

answer
107

Views

How can I resolve Web Component Testing error?

Hello to anyone reading: Currently, I am trying to run a test in a demo repository, seen here. After doing the npx wct command, I see the following: TYS-ITS-169599:wct-eyes-example lhuddlesto$ npx wct Eyes WCT plugin loaded. Starting Selenium server for local browsers Selenium server running on port...
nomadfox
1

votes
0

answer
111

Views

ShadowDOMV0 behavior with Polyfill with --disabled-blink-features flag

As per Polymer blog, Chrome will deprecate WebComponents v0 from march 2019. My app is built with Polymer v1.x and we are using native ShadowDOM. After deprecation, ShadowDOM will no longer work and implementation will fall back to Shady DOM. As per blog, sites based on Polymer v1.x can use Polyfill...
Upasana
1

votes
1

answer
27

Views

A-Frame web component compatibility

I have had a look at the A-Frame 3d/Virtual Reality specification: aframe.io Although it appears to nod in the direction of Web Components it doesn't appear to conform to the emerging Web Components standards. As someone has already pointed out on Stackoverflow it uses document.registerElement which...
MatureHampers
1

votes
1

answer
99

Views

How to expose state to localStorage with polymer 3 PWA starter template

I am using the Polymer 3 PWA starter package template taken from here: https://github.com/Polymer/pwa-starter-kit/tree/template-typescript I now want to put the state to localStorage as described in the documentation. So I am adding localstorage.ts file export const saveState = (state) => { let stri...
datapool
1

votes
3

answer
125

Views

How do I access JavaScript variable under Color portion of HTML code?

I would like to access the variable 'theSkyColour' inside the HTML code below as shown. May I know how do I access it as shown? The following is the code I have written: function getSkyColour() { var theSkyColour = localStorage.getItem('skySet[enter image description here][1]ting'); } I have view...
Jim Ng
1

votes
0

answer
75

Views

Document load event not fired in Chrome

We have an application using WebComponents V0 spec. We use Polymer's vulcanizer to put together all our components into a single importable HTML and import it from the main application page (HTML imports). Noticed an issue in Chrome recently (not sure about the version-since) that document doesn't l...
Varunkumar Nagarajan
1

votes
2

answer
236

Views

Web Component / HtmlElement : unit testing

I'm trying to test a web component. Here is my project structure : ├── package.json ├── src │   ├── app.js │   └── index.html └── test └── hello-world-test.html Here is my working code : class HelloWorld extends HTMLElement { connectedCallback () { this....
Loo
1

votes
0

answer
25

Views

Embedding and authentication across a multitude of domains

I want to embed a small web-app across various third party domains, much like Disqus does with their commenting app. The users need to authenticate, and this needs to persist across the domains. I noticed that Disqus uses an to deploy their app. I assume that is so that they can use cookies to main...
Roy Prins
0

votes
1

answer
889

Views

Script inside shadow dom not working

I've created and exported one Angular Element (web component in Angular) as a single script tag (user-poll.js). To use this Angular Element I just need to specify below two lines in the host site: Working JSBin Example I've following requirements: Load multiple Angular Elements on the external site....
1

votes
1

answer
41

Views

DOM order matters for accessibility in web components with RTL/LTR options?

I'm trying to make react components with accessibility at least AA level according to WCAG, In other hands, My components need to have RTL (right to left) and LTR (left to right) option, LTR is my default configuration and everything is according to AA rules but when I change to RTL version all my v...
Yoandry Collazo
1

votes
0

answer
80

Views

Web Components not working for Firefox extension

Overall what I am trying to achieve is injecting a custom element into the dom. I see it being injected, but I get a TypeError: this.functionName is not a function message. I've defined my component simlar to this: class Foo extends HTMLElement{ constructor() { super(); } connectedCallback() { this....
ConfusedProgrammer
1

votes
1

answer
142

Views

Rendering a lit-element in light DOM to use with stripe.js

Stripe.js does not yet support shadow-dom. Using Lit-elements's createRenderRoot() (documentation),(source) you can render the template into the element's light DOM by using return this; . However this only works if you implement createRenderRoot() in all parent elements. Is there a way around this...
Ramy
1

votes
1

answer
39

Views

How to test service files using wct in polymer if it doesn't contain any custom component

I would like to write unit test case for a service file named session.js, where there is no custom element is defined. Can we call functions defined in service file from Polymer WCT. export const ValidateSession=()=>{ try{ return (logindate
D.P

View additional questions