Styjun

Detect the first rising edge of 3 input signals

How to make a language evolve quickly?

Has there been evidence of any other gods?

How to evaluate sum with one million summands?

Should I pay on student loans in deferment or continue to snowball other debts?

Ex-manager wants to stay in touch, I don't want to

Are there variations of the regular runtimes of the Big-O-Notation?

Is there any evidence to support the claim that the United States was "suckered into WW1" by Zionists, made by Benjamin Freedman in his 1961 speech

Thesis' "Future Work" section – is it acceptable to omit personal involvement in a mentioned project?

Why did Captain America age?

Intersecting with the x-axis / intersecting the x-axis

What do "KAL." and "A.S." stand for in this inscription?

Was there a contingency plan in place if Little Boy failed to detonate?

Why are parallelograms defined as quadrilaterals? What term would encompass polygons with greater than two parallel pairs?

Exception propagation: When to catch exceptions?

When quoting someone, is it proper to change "gotta" to "got to" without modifying the rest of the quote?

What does this quote in Small Gods refer to?

Why do unstable nuclei form?

Company threw a surprise party for the CEO, 3 weeks later management says we have to pay for it, do I have to?

Names of the Six Tastes

Why is the Sun made of light elements only?

Pre-1993 comic in which Wolverine's claws were turned to rubber?

Why should password hash verification be time constant?

How to slow yourself down (for playing nice with others)

Angular full encapsulation when creating a hosted angular widget

Angular/RxJs When should I unsubscribe from `Subscription`Angular 2 - Multiple components in any layout on different static pagesCan Bootstrap (4) be integrated along with Angular Material (2)?angular 4 material doing page navigationangular 5 master detail with cdk portalAngular material 2 checkboxes on mat table hiding on hover for large recordsSCSS encapsulation in Angular libraryIssues with Angular Material IconsShould I use Angular Material or Bootstrap Material for my Angular 6 app?Using Angular Material2 with PrimeNG in the same project

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

10

1

I have an angular widget that should be embedded in different sites and I have no knowledge about the sites that will embed it.

I cannot place the widget in an IFrame.

This means that the widget should be 100% encapsulated.

The widget is using components from certain libraries like:

angular bootstrap - https://angular-ui.github.io/bootstrap/

@angular/material

Some of the components from those libraries are using view encapsulation set to none which means one problem will be that my head will contain stuff like:

.mat-checkbox ...

which is not good cause it might interfere with the host site styles.

Another problem is that I cannot afford class names like .mat-checkbox
cause this means that the host site can load a material design template and change my widget appearance.

I examined other companies solution like hotjar

they do not place in iframe and they simply hash their classnames (probably using a library for css in js like typestyle or postcss) which is a great solution for me - but

how do i hash the classnames of the components from 3rd party libraries like material design and angular bootstrap?

Things I tried:

• Angular elements for creating a web component




• Typestyle

angular

share|improve this question

edited Mar 23 at 17:26

Yariv Katz

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

add a comment | 

10

1

I have an angular widget that should be embedded in different sites and I have no knowledge about the sites that will embed it.

I cannot place the widget in an IFrame.

This means that the widget should be 100% encapsulated.

The widget is using components from certain libraries like:

angular bootstrap - https://angular-ui.github.io/bootstrap/

@angular/material

Some of the components from those libraries are using view encapsulation set to none which means one problem will be that my head will contain stuff like:

.mat-checkbox ...

which is not good cause it might interfere with the host site styles.

Another problem is that I cannot afford class names like .mat-checkbox
cause this means that the host site can load a material design template and change my widget appearance.

I examined other companies solution like hotjar

they do not place in iframe and they simply hash their classnames (probably using a library for css in js like typestyle or postcss) which is a great solution for me - but

how do i hash the classnames of the components from 3rd party libraries like material design and angular bootstrap?

Things I tried:

• Angular elements for creating a web component




• Typestyle

angular

share|improve this question

edited Mar 23 at 17:26

Yariv Katz

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

add a comment | 

I have an angular widget that should be embedded in different sites and I have no knowledge about the sites that will embed it.

I cannot place the widget in an IFrame.

This means that the widget should be 100% encapsulated.

The widget is using components from certain libraries like:

angular bootstrap - https://angular-ui.github.io/bootstrap/

@angular/material

Some of the components from those libraries are using view encapsulation set to none which means one problem will be that my head will contain stuff like:

.mat-checkbox ...

which is not good cause it might interfere with the host site styles.

Another problem is that I cannot afford class names like .mat-checkbox
cause this means that the host site can load a material design template and change my widget appearance.

I examined other companies solution like hotjar

they do not place in iframe and they simply hash their classnames (probably using a library for css in js like typestyle or postcss) which is a great solution for me - but

how do i hash the classnames of the components from 3rd party libraries like material design and angular bootstrap?

Things I tried:

• Angular elements for creating a web component




• Typestyle

angular

share|improve this question

edited Mar 23 at 17:26

Yariv Katz

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

.mat-checkbox ...

angular

angular

share|improve this question

edited Mar 23 at 17:26

Yariv Katz

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

share|improve this question

edited Mar 23 at 17:26

Yariv Katz

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

asked Mar 21 at 7:53

Yariv KatzYariv Katz

9221122

2 Answers
2

active

oldest

votes

2

+25

One thing you could try, which is not that Angulary is to use TreeWalker to go over all of the nodes in your widget in ngAfterViewInit lifecycle hook and alter classes using Renderer2 in a way you like. TreeWalker is supported by domino so it should even work with Angular Universal.

share|improve this answer

edited Mar 26 at 6:36

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  TreeWalker or MutationObserver are fine solutions for knowing that a change happen, and yes I can then use Renderer2. This solution will work for changing the class names. Performance wise it will be better to just reflect the private platform browser service: DefaultDomRenderer2 which also works for me with much better performance. The problem I have now is that i need to change also the styles to match those class name so I need to somehow alter the angular material styles and hash those classnames and match them with the class names im changing in the DOM.
  
  – Yariv Katz
  Mar 25 at 19:34
  
  

  
  
  
  

add a comment | 

2

You have written you have tried angular elements but didn't mention if you face any problem with it. I am creating a project which lives in other's project and analyze their project at run time. For me, the angular element was a perfect fit. If you use encapsulation: ViewEncapsulation.ShadowDom in your root component, your styles will automatically be scoped. You can use them in non angular project as well.

share|improve this answer

edited Mar 26 at 6:59

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried ViewEncapsulation.ShadowDom with angular elements. the problem is when embedding a 3rd party component with ViewEncapsulation.None for example @angular/material BottomSheet. Components like that, even though they are nested in my element with ShadowDom will still write their styles to the head section of the host styles. Try to embed BottomSheet in your widget and examine the head section you will see those styles.
  
  – Yariv Katz
  Mar 26 at 17:22
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55275873%2fangular-full-encapsulation-when-creating-a-hosted-angular-widget%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

+25

One thing you could try, which is not that Angulary is to use TreeWalker to go over all of the nodes in your widget in ngAfterViewInit lifecycle hook and alter classes using Renderer2 in a way you like. TreeWalker is supported by domino so it should even work with Angular Universal.

share|improve this answer

edited Mar 26 at 6:36

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  TreeWalker or MutationObserver are fine solutions for knowing that a change happen, and yes I can then use Renderer2. This solution will work for changing the class names. Performance wise it will be better to just reflect the private platform browser service: DefaultDomRenderer2 which also works for me with much better performance. The problem I have now is that i need to change also the styles to match those class name so I need to somehow alter the angular material styles and hash those classnames and match them with the class names im changing in the DOM.
  
  – Yariv Katz
  Mar 25 at 19:34
  
  

  
  
  
  

add a comment | 

2

+25

One thing you could try, which is not that Angulary is to use TreeWalker to go over all of the nodes in your widget in ngAfterViewInit lifecycle hook and alter classes using Renderer2 in a way you like. TreeWalker is supported by domino so it should even work with Angular Universal.

share|improve this answer

edited Mar 26 at 6:36

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  TreeWalker or MutationObserver are fine solutions for knowing that a change happen, and yes I can then use Renderer2. This solution will work for changing the class names. Performance wise it will be better to just reflect the private platform browser service: DefaultDomRenderer2 which also works for me with much better performance. The problem I have now is that i need to change also the styles to match those class name so I need to somehow alter the angular material styles and hash those classnames and match them with the class names im changing in the DOM.
  
  – Yariv Katz
  Mar 25 at 19:34
  
  

  
  
  
  

add a comment | 

One thing you could try, which is not that Angulary is to use TreeWalker to go over all of the nodes in your widget in ngAfterViewInit lifecycle hook and alter classes using Renderer2 in a way you like. TreeWalker is supported by domino so it should even work with Angular Universal.

share|improve this answer

edited Mar 26 at 6:36

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

share|improve this answer

edited Mar 26 at 6:36

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

answered Mar 25 at 9:49

pokrishkapokrishka

1,20141327

2

You have written you have tried angular elements but didn't mention if you face any problem with it. I am creating a project which lives in other's project and analyze their project at run time. For me, the angular element was a perfect fit. If you use encapsulation: ViewEncapsulation.ShadowDom in your root component, your styles will automatically be scoped. You can use them in non angular project as well.

share|improve this answer

edited Mar 26 at 6:59

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried ViewEncapsulation.ShadowDom with angular elements. the problem is when embedding a 3rd party component with ViewEncapsulation.None for example @angular/material BottomSheet. Components like that, even though they are nested in my element with ShadowDom will still write their styles to the head section of the host styles. Try to embed BottomSheet in your widget and examine the head section you will see those styles.
  
  – Yariv Katz
  Mar 26 at 17:22
  

  
  
  
  

add a comment | 

2

You have written you have tried angular elements but didn't mention if you face any problem with it. I am creating a project which lives in other's project and analyze their project at run time. For me, the angular element was a perfect fit. If you use encapsulation: ViewEncapsulation.ShadowDom in your root component, your styles will automatically be scoped. You can use them in non angular project as well.

share|improve this answer

edited Mar 26 at 6:59

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried ViewEncapsulation.ShadowDom with angular elements. the problem is when embedding a 3rd party component with ViewEncapsulation.None for example @angular/material BottomSheet. Components like that, even though they are nested in my element with ShadowDom will still write their styles to the head section of the host styles. Try to embed BottomSheet in your widget and examine the head section you will see those styles.
  
  – Yariv Katz
  Mar 26 at 17:22
  

  
  
  
  

add a comment | 

You have written you have tried angular elements but didn't mention if you face any problem with it. I am creating a project which lives in other's project and analyze their project at run time. For me, the angular element was a perfect fit. If you use encapsulation: ViewEncapsulation.ShadowDom in your root component, your styles will automatically be scoped. You can use them in non angular project as well.

share|improve this answer

edited Mar 26 at 6:59

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430

share|improve this answer

edited Mar 26 at 6:59

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430

answered Mar 26 at 6:50

dasfdsadasfdsa

1,6471430