I'm developing a React/MaterialUI component that will be embedded in existing websites.
In order to minimise the work needed on the existing page to embed my component, I'm bundling my component into an app.js and the only change requested to the existing page is something like:
<div id="embedded-component"></div>
<script type="text/javascript" src="https://example.com/app.js"></script>
my component finds the div by ID and then mounts on that element.
Things are mostly working but I'm having issues with CSS conflicts between the CSS files on the original page (which I can't modify) and the elements of my application.
For example the original page uses text input elements with a border/padding/color that I don't want my component to "inherit".
I want my component to display the same way regardless of which page is embedded on.
Is there any strategy/tool to use in this case, so CSS classes on existing page do not affect the elements of my embedded component?
Trying to find a solution to this I've come across the Shadow DOM (e.g. https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba) but I'm not sure how widely supported this is in different browsers.
Is there any solution to this, that is widely supported by all major browsers?
I cannot use iframes and have full control of my js/css files but no control over the existing page other than the "mounting" div.
My web app generate an amp-valid page and via https://validator.ampproject.org/# I can check that the output is amp- valid.
But for me is not enough I want somehow to render visualy the <amp-*></amp-*> elements. I mean if I want to chance some css for these elements how I can do it without deploying my application all over the time?
Some elements may not be rendered because they need the correct amp extention in order to load. Therefore if some elements do not get rendered just load the correct amp.js extention in order to get rendered into your browser.
Furthermore make sure that the AMP javascript and their plugis get loaded firtst in order to be able to correcly get rendered.
I am making a web application that uses meteor js as a framework. In it I have a template with some html elements and then a style tag that changes the background of an html element in the template. I set up some code that makes the template display for every document in a mongo database I set up with meteor, and as soon as I did this the url for the background change in the css wont register anymore. It will work if I put in a color like "black" but if I give it a specific path like /images/image.jpg it will not work, even though this used to work just fine.
I am using ui-router of angularjs in my SPA. When i add an style to my view pages, angularjs loads them when switching to than view. Thats actually pretty cool that it can be done in runtime.
The problem is i do not want it to do so. for example i want to use bootstrap css in my view. it is already inserted in the main page, so it is not needed to get loaded again form child view. but for my IDE to auto-complete class names, it is needed to be added to html page of subview.
Is there any way to ask Angularjs to ignore Head part and just load Body part of my html?
When a web page loads, does the content with display:none affect the load time?
I have a huge list in html with about 600 links assigned so the html page alone comes to around 450kb(excluding images~150kb), while the stipulated size of a page according to our server is 300 kb.
But the lists are divided into 4 main lists which toggle between display none to visible.
i.e.when list 1 is visible others are hidden.and so on.
So I was wondering how the load time of the html page would be affected by this.
Thanks.
Yes,It does affect the load time.
I too tried this on my own website,It took some time to load.even if the div was hidden
I suggest you to load it dynamically,using jquery or ajax ,put all those menu item or what ever images in a separate html file,and call it whenever required.
Save's load time but More Coding
Yes, because it is loading the full html. You can see the html code in the browsers code inspector. And you see the images in the hidden-tags was loading.
You can prevent this by using javascript. Only load the images when clicking the active tab.
Yes, it does. The browser loads html and parses also the hidden elements. They are also part in the internal "element-tree" of the browser. Otherwise you wouldn't be able to reference them e.g. via JavaScript to modify them.
Yes of couse it affects the load time visibility in the DOM. The ammount to download is still the same.
To improve this you could use:
Pagination (will_paginate in Rails, https://github.com/onassar/PHP-Pagination php)
Infinite scrolling(will load the content dynamically during scrolling)
AJAX loading of the lists