So I faced the challenge of created a large custom app through the Buildfire platform. The client had a lot of custom element styles that were being overridden by the appTheme settings in the dashboard, and overriding these styles in traditional CSS fashion was growing to be a monumental task.
I wrote this small function to remove the custom styles injected into the application and so far all of the client's custom styling is showing correctly.
I figured I would share this with the community since this has been an issue without resolution for our team.
If you wish to disable the appTheme CSS in your plugin, you can simply use a meta tag in the widget's HTML, like so:
<meta name="buildfire" content="disableTheme">
This is covered the SDK wiki under the meta tag section.
This code is inside my index.html file for the AngularJS Application.
<body ng-controller="mainController" onload="removeCustomCSS()">
<script>
function removeCustomCSS() {
let links = document.querySelectorAll('[href*=appTheme]');
links[0].remove();
}
</script>
Related
So I'm working on a micro-frontend architecture POC right now, using Web Components to wrap around code from any other framework out there. The goal is to have pieces of the UI be individually deployable to different hosts and simply pulled into the "parent" app (ie, the one that the user navigates to).
I've got most of my architecture working, but right now I'm trying to integrate the Shadow DOM into my work. My current design is to load both the JS and CSS through global static link/script tags, as shown below. Without the Shadow DOM, this works perfectly.
<html>
<head>
<link rel="stylesheet" href="http://micro-fe.com/file.css" />
</head>
<body>
<web-component></web-component>
<script src="http://micro-fe.com/file.js"></script>
</body>
</html>
Once I mount the content inside my Web Component using the Shadow DOM, however, this breaks down. The stylesheet I am loading in the page header is no longer able to touch the content within the Web Component. That is my ultimate goal for using the Shadow DOM, but that means I need a different way of loading my CSS. The goal is to load it from an external stylesheet like it is now, and not have it inlined in a tag. Something like this:
// Code is inside Web Component. "this" is HTMLElement
const shadowRoot = this.attachShadow({ mode: 'open' });
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://micro-fe.com/file.css';
shadowRoot.appendChild(link);
I haven't tested that yet, but I've read that tags are supposed to work from within the Shadow DOM. This, in theory, will get me my scoped styles in the Web Component.
My final challenge, and the reason I am posting this question, has to do with conditional rendering. My won't always be on the page. Other logic around it will determine when I want that content rendered. So my concern is that I don't want the CSS file to have to be re-loaded each time the component gets rendered.
I'm considering browser caching as a possible solution, but in general I'm wondering if there are any tips that can be provided. I know this is a bit complicated and non-standard, but my ultimate goal is to solve all of these problems and publish a library that does it all out of the box to make it easier for others.
I haven't tested that yet, but I've read that tags are supposed to work from within the Shadow DOM. This, in theory, will get me my scoped styles in the Web Component.
Yes, you can use <link> inside Shadow DOMs.
So my concern is that I don't want the CSS file to have to be re-loaded each time the component gets rendered. I'm considering browser caching as a possible solution, but in general I'm wondering if there are any tips that can be provided.
Yes, thanks to browser caching the CSS file will only be downloaded the first time it is needed.
Two global syles entries are added to my pages and I cannot have control over them.
Could you help me to understand which components are injecting them?
App developed in gatsby using:
Grommet
Styled components
Code gets included in header section
<style data-emotion="css-global"> ... <style>
<style data-emotion="css-global"> ... <style>
I would like to know, how I can debug the issue? Let's say which component is responsible for adding these two lines.
These are defined in Emotion's <Global /> component (emotion global styles). If you used a starter or theme this is probably the source. If this isn't enough direction, please share a link to the starter or theme repo, or to your repo.
I'm working on Crossrider project, which should be styled as bootstrap(both js and css).
I tried to include them as other js files inside extension.js, but instead of styling popover, current site was styled.
At the moment I'm using standard <link> and <script> tags inside popover.html.
What is the best way to attach those files to project?
There isn't a lot to go on here, but from the description provided it seems you are injecting the bootstrap components into the page scope and hence experiencing conflicts with sites using bootstrap. I suggest you make your bootstrap classes unique to avoid this issue. I found the following site which might help you get started: https://formden.com/blog/isolate-bootstrap
[Disclosure: I am a Crossrider employee]
I have an amateur sports website to maintain and I am not an expert in web development. The pages I can put on the website can only be in the form of predefined templates, something similar to wordpress.
The main website loads it's own CSS files and JS files which we do not want as it interferes with our customisations. These files change as and when the main administrators/developers deploy new ones to the main/parent website.
I want to dynamically block loading of all CSS files and JS files that are not ours and instead use our own custom CSS and JS files.
Currently I am doing something like this below, but as you can see I will have to update the file names whenever they change to something else and I would not know when they change unless I notice the difference on the webpages.
<script type="text/javascript">
$('link[rel=stylesheet][href="/assets/application-b51e2731e0d53e4d422.css"]').remove();
$('link[rel=stylesheet][href="/assets/print-a622ffc90d1232b126e42c.css"]').remove();
jQuery('head script[src*="application-7fd426f9bca208.js"]').remove();
</script>
Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?
Instead of worrying about tracking file names, why not just target anything that's not yours?
$('link').not('.myLink').remove();
And just make sure you drop that class on your link:
<link rel="stylesheet" href="path.css" class="myLink" />
I'm learning web components with a shadow root and can't seem to find on google if loading external stylesheets is possible with out-of-the-box code? I am NOT using polymer or any other web component library (yet). Code below:
<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
var hollaProto = Object.create(HTMLElement.prototype);
hollaProto.createdCallback = function () {
var shadow = this.createShadowRoot();
var content = document.querySelector('link[rel=import]').import.querySelector("div");
$("button[data-command=holla]", content).on("click", function () { alert("Holla!"); });
shadow.appendChild(content);
};
var hollaWidget = document.registerElement("holla-back", {
prototype: hollaProto
});
</script>
<div class="holla-back">
<button data-command="holla">Holla!</button>
</div>
If I put my link tag up top, above the first script tag, I style the whole web age, but not the web component.
If I put it under div.holla-back it doesn't style anything.
How do you use external stylesheets with web components?
Link tags are inert in Shadow DOM according to the spec. However, you can use #import, though that has its own performance issues.
The way Polymer works around this is it looks at the link tags and uses xhr to load those styles and apply them.
edit:
The folks working on Shadow DOM are aware of this shortcoming and that it needs to be fixed. Hopefully in the future we can come up with a system that supports external stylesheets.
Shadow DOM doesn't react to link tags. Infact, Chrome 41 throws an error when you use link tags. We have worked around that limitation by inlining CSS classes at the build time using vulcanize. This turned out to be quite handy in separating your CSS and the component definition.