Angular full encapsulation when creating a hosted angular widgetAngular/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
Multi tool use
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;
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
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
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
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
angular
edited Mar 23 at 17:26
Yariv Katz
asked Mar 21 at 7:53
Yariv KatzYariv Katz
9221122
9221122
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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.
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 |
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.
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
);
);
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
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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.
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.
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.
edited Mar 26 at 6:36
answered Mar 25 at 9:49
pokrishkapokrishka
1,20141327
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 |
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
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
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 |
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.
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.
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.
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.
edited Mar 26 at 6:59
answered Mar 26 at 6:50
dasfdsadasfdsa
1,6471430
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 |
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
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
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 |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
vP d3,q6IztS6MuK6CIZn00Uy,9kvP,7LxT 4XzQsEV9icxP1PHHsJodPRR