web-components | web components demo for encapsulated alert | User Interface library

by FrankFan JavaScript Version: Current License: No License

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | web-components Summary

web-components is a JavaScript library typically used in User Interface, Vue, Angular, Bootstrap, jQuery applications. web-components has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.

a web components demo for encapsulated alert&confirm&prompt UI widget with requirejs

Support

Quality

Security

License

Reuse

Support

web-components has a low active ecosystem.

It has 12 star(s) with 21 fork(s). There are 2 watchers for this library.

It had no major release in the last 6 months.

web-components has no issues reported. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of web-components is current.

Quality

web-components has no bugs reported.

Security

web-components has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

web-components does not have a standard license declared.

Check the repository for any license declaration and review the terms closely.

Without a license, all rights are reserved, and you cannot use the library in your applications.

Reuse

web-components releases are not available. You will need to build from source code and install.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of web-components

Get all kandi verified functions for this library.

web-components Key Features

No Key Features are available at this moment for web-components.

web-components Examples and Code Snippets

No Code Snippets are available at this moment for web-components.

Community Discussions

Trending Discussions on web-components

Micro Frontend - A platform with a different configuration has been created. Please destroy it first

Can I wait on connectedCallback finsh work in tests?

lit-element getElementById in connectedCallback returns null

Angular Web-Component created with Angular Elements overrides app-root of the Angular Shell Project

Retrieving user Id and language parameters to embedded web-component from the target site

WebComponent that extends HTMLButtonElement is not calling constructor() and connectedCallBack()

How can I force Spartacus to load a template

How to use a Service into a web component

Not able to fetch updated content from div contenteditable on keyup event

WebComponents - what's the advantage of using CSS Custom Properties in the Component Public Interface?

QUESTION

Micro Frontend - A platform with a different configuration has been created. Please destroy it first

Asked 2021-May-24 at 06:28

I am trying to build a POC for Micro Frontend using Angular and Webpack Module Federation. In this, I have created a shell app and another mfe1 app and rendering that mfe1 on a specific route hit and it is working as expected and rendering the app. Now, I am trying to create another app called mfe2 and render it. In this mfe2, I am creating a web component using Angular elements and rendering that in the shell app. When I do that, I am facing the following issue

Error: A platform with a different configuration has been created. Please destroy it first.

when the following code is executing

...

ANSWER

Answered 2021-May-24 at 06:28

Taken the solution from here: https://github.com/angular-architects/module-federation-plugin/issues/47#issuecomment-845145887

Per shared Angular version, we are only allowed to create one platform. To remember that there is already a shared platform for our version, we could put it into a global dictionary mapping the version number to the platform instance:

Source https://stackoverflow.com/questions/67545533

QUESTION

Can I wait on connectedCallback finsh work in tests?

Asked 2021-Apr-14 at 05:50

I am trying to test some code and I know it will work as expected, but I do not know how can I write tests in that case because my attribute is set always after test have finish?

In general, I have created an abstract WebComponent class which needs to be inherited by my custom web-components instead of HTMLElement. This whole abstract class have some common logic for all my web-components for example setting props if user passed any by constructor.

I have created a simple example to show what I want to achieve. In the example below I am creating a HelloWorld component this component has one observedAttributes which is heading-content (value which will be dispalyed inside

of HelloWorld component template). If users sets heading-content via constructor, then I am saving this value inside this.propsContent. Then after connectedCallback is triggered I am setting this props setContentFromProps which triggers attributeChangedCallback and this callback does the rest.

Is it possible to somehow wait until these actions end?

Example

HelloWorld component:

...

ANSWER

Answered 2021-Apr-14 at 05:50

Not without adding code; there is no allAttributesChangesDone callback. And its not possible to write unless you know upfront What needs to be changed.

I see, so it is impossible. Anyway thank you for your answer

If you wait till the Event Loop is done; you can be fairly sure all updates are done... unless there is async code doing updates...

"What the heck is the Event Loop:" https://youtube.com/watch?v=8aGhZQkoFbQ&vl=en

That's true but If I wait when EventLoop will become free than my tests can take much more time. Actually, now after I thought more about that my test is 'not working' (in my opinion a few hours ago) I can say I was mistaken and the test works correctly, and I should take care of the case when someone is trying to access the attribute before it is initialized.

Source https://stackoverflow.com/questions/67074828

QUESTION

lit-element getElementById in connectedCallback returns null

Asked 2021-Apr-13 at 08:28

I remember many web components tutorials say connectedCallback is good for hooking up DOM events or getting some DOM elements (like this one). But I couldn't get a simple program to run in lit-element:

...

ANSWER

Answered 2021-Apr-13 at 08:28

connectedCallback works according to the spec, it just doesn't do what you expect.

Those callbacks fire at different moments in time

Source https://stackoverflow.com/questions/66303117

QUESTION

Angular Web-Component created with Angular Elements overrides app-root of the Angular Shell Project

Asked 2021-Apr-09 at 08:40

I am currently trying out Angular Elements for creating web components. I have created a web component that works in an html page:

...

ANSWER

Answered 2021-Apr-09 at 08:40

Thanks to user14649759's tip, I was able to solve the problem! :)

Webpack 5 must be used. To achieve this, I have made the following changes:

Source https://stackoverflow.com/questions/67016399

QUESTION

Retrieving user Id and language parameters to embedded web-component from the target site

Asked 2021-Mar-18 at 12:12

I am absolutely new to making web-components and have little experience with React. I have a web-component (Direflow) embedded into the "big" site. The component is pretty simple, but has several parameters such as userId and locale. I tried with hardcoded parameters for testing but now I want it to get them from that site because each user needs access only to their own items on the service. The HTML tag for embedding looks like this:

...

ANSWER

Answered 2021-Mar-18 at 12:12

As simple as it is, in my case:

Source https://stackoverflow.com/questions/66586592

QUESTION

WebComponent that extends HTMLButtonElement is not calling constructor() and connectedCallBack()

Asked 2021-Mar-05 at 16:53

I'm trying to create a web component button but when I add it in HTML the constructor() function is never being called.

...

ANSWER

Answered 2021-Mar-05 at 16:53

Re: from comments

That link is to the HTMLButtonElement That is a standard element supported by all Browsers.

There are 2 different flavored Web Components:
details see Web Components : extending native elements

Autonomous Elements (extend from HTMLElement)
Customized Built-In Elements (extend from any Element)

But Apple/WebKit will not implement the latter as stated in 2016:

https://github.com/WICG/webcomponents/issues/509

Source https://stackoverflow.com/questions/66494383

QUESTION

How can I force Spartacus to load a template

Asked 2021-Jan-21 at 08:27

how can I get Spartacus to load a specific template from the backend when the main module don't get bootstraped (web-component)?

My use case is as follows:

I have a site which is build with accelerator. I would like to migrate it to Spartacus step by step. First the header, then the footer and then the rest (move from accelerator to SPA only). My custom footer and header works in the Spartacus SPA. To integrate them into accelerator, I build web-components for the header and footer with ngx-build-plus. They work, but render only the static part of the component and not the slots of Spartacus. I also don't see the request to the backend.

AppModule:

...

ANSWER

Answered 2021-Jan-21 at 08:27

Most of the logic related to layout loading is tied to the routing, inside CmsPageGuard, and in your case navigation is not happening.

So, you can either try faking it (do the navigation in your component) or try to do all the steps manually. I think, what's needed, is to set proper page context (RoutingService.getPageContext()) and call CmsService.getPage (or hasPage) to trigger the load. Not sure if this is all, but I think it's a good start (and you should have layout and slots data loaded).

Source https://stackoverflow.com/questions/65814523

QUESTION

How to use a Service into a web component

Asked 2020-Nov-13 at 18:17

I'm trying to make an angular web component by following this guide: https://www.codementor.io/blog/angular-web-components-8e4n0r0zw7

It works but when I have to inject services into my component, nothing works anymore, if I write (private service: DataService) in the constructor I have a blank screen and no console errors.

...

ANSWER

Answered 2020-Nov-13 at 18:17

constructor(injector: Injector) {}

 ngDoBootstrap(): void {
    const el = createCustomElement(OptixCalendarComponent, {injector});
    customElements.define('optix-calendar', el);
  }

Source https://stackoverflow.com/questions/64824926

QUESTION

Not able to fetch updated content from div contenteditable on keyup event

Asked 2020-Oct-28 at 08:29

I am implementing this using lightning-web-components.

I am using

to apply different styling to multiple lines.

Here, assetSerialNumber and assetLocation gets populated in connectedcallback() method in js. I am using divTextarea in class to make div look like textarea which is working fine.

.html file

...

ANSWER

Answered 2020-Oct-28 at 08:29

I was able to get updated content from div with below approach. I removed default text from html file and added those in innerHTML in js file. Then I was able to get updated content from input.textContent.

html file

Source https://stackoverflow.com/questions/64483795

QUESTION

WebComponents - what's the advantage of using CSS Custom Properties in the Component Public Interface?

Asked 2020-Sep-23 at 10:30

A WebComponent may include CSS Custom Properties in its encapsulated styles.

This gives consumers of the component a way to customise that component's styles:

See: Creating style hooks using CSS custom properties | Google Web Fundamentals

Declaring

...

ANSWER

Answered 2020-Sep-23 at 10:30

You won't notice any difference when dealing with the host element but you can clearly see the use of CSS variables when having more elements inside:

Example where CSS variables is useful to update the styling of nested elements. I doubt you can find a better way without CSS variables.

Source https://stackoverflow.com/questions/64025213

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install web-components

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: