Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Question

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Is there a way to isolate elements within a div, similar to how it would behave in an iFrame?

I am facing issues with the global SharePoint styles affecting my app inside SharePoint. I want to completely disable these global styles so that my app only uses its own CSS.

For example, if there is a global stylesheet for the page, and I add a div with its own embedded CSS, is there a way to override the global stylesheet entirely?

Check out this link for more information.

<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Global parent element - red</h1>

  <div class="self-contained-css">

    <style type="text/css">
      h1 {
        color:red;
        border: 1px solid blue;
      }
    </style>

    <h1>Self contained css element - blue</h1>
    <p>The self-contained CSS should act as though it is within an iFrame to separate it from the SharePoint CSS.</p>
  </div>

</body>
</html>

javascript html css angularjs sharepoint

Answer 1

Answer №1

If you're looking for a way to encapsulate content like an iframe, Web Components are the way to go. By using a polyfill such as webcomponents.js, you can achieve solid compatibility.

For a more streamlined approach to creating Web Components, consider utilizing Polymer.

With this setup, your code could take on the following structure:

... Insert HTML with global styles here ...
<my-element></my-element> <!-- This element will not inherit global CSS -->

Within the my-element component (which is essentially just another file in your system imported into the page), you have the flexibility to add unique styles specific to the content of my-element.

Answer 2

If you're looking for a way to encapsulate content like an iframe, Web Components are the way to go. By using a polyfill such as webcomponents.js, you can achieve solid compatibility.

For a more streamlined approach to creating Web Components, consider utilizing Polymer.

With this setup, your code could take on the following structure:

... Insert HTML with global styles here ...
<my-element></my-element> <!-- This element will not inherit global CSS -->

Within the my-element component (which is essentially just another file in your system imported into the page), you have the flexibility to add unique styles specific to the content of my-element.

Answer 3

Answer №2

The issue lies with the global styles containing a !important declaration. To override them, you may need to include the same declaration in your code as well.

/* Your custom styles */

h1 {
  color:blue;
  border: 1px solid blue !important;
}

<body>
  
  <h1>Global parent element - red</h1>
  
  <div class="self-contained-css">
    
    <style type="text/css">
      h1 {
        color:blue;
        border: 1px solid blue !important;
      }
    </style>
    
    <h1>Self contained css element - blue</h1>
    <p>This isolated self-contained css acts similarly to an iFrame, separate from SharePoint css.</p>
  </div>

Answer 4

The issue lies with the global styles containing a !important declaration. To override them, you may need to include the same declaration in your code as well.

/* Your custom styles */

h1 {
  color:blue;
  border: 1px solid blue !important;
}

<body>
  
  <h1>Global parent element - red</h1>
  
  <div class="self-contained-css">
    
    <style type="text/css">
      h1 {
        color:blue;
        border: 1px solid blue !important;
      }
    </style>
    
    <h1>Self contained css element - blue</h1>
    <p>This isolated self-contained css acts similarly to an iFrame, separate from SharePoint css.</p>
  </div>

Answer 5

Answer №3

My approach involves utilizing the shadow DOM. When working with Angular 1, I had to resort to using an iframe. However, with Angular 2, we have the ability to experiment with the shadow DOM functionality.

Answer 6

My approach involves utilizing the shadow DOM. When working with Angular 1, I had to resort to using an iframe. However, with Angular 2, we have the ability to experiment with the shadow DOM functionality.

Answer 7

Answer №4

To display your HTML content without being affected by the page's CSS, you can use an iframe with the srcdoc attribute.

var myIframe = document.createElement('iframe');
myIframe.src = 'about:blank';
var info = `<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Global parent element - red</h1>

  <div class="self-contained-css">

    <style type="text/css">
      h1 {
        color:red;
        border: 1px solid blue;
      }
    </style>

    <h1>Self contained css element - blue</h1>
    <p>Self contained css should behave as if it was inside an iFrame. This is to isolate from SharePoint CSS ultimately.</p>
  </div>

</body>
</html>`;
myIframe.srcdoc = info;
var body = window.document.querySelector('body');
body.insertBefore(myIframe, body.firstChild);

If you prefer writing the iframe in pure HTML, that works too! Just remember to keep the srcdoc clean for easier readability and maintenance.

Answer 8

To display your HTML content without being affected by the page's CSS, you can use an iframe with the srcdoc attribute.

var myIframe = document.createElement('iframe');
myIframe.src = 'about:blank';
var info = `<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Global parent element - red</h1>

  <div class="self-contained-css">

    <style type="text/css">
      h1 {
        color:red;
        border: 1px solid blue;
      }
    </style>

    <h1>Self contained css element - blue</h1>
    <p>Self contained css should behave as if it was inside an iFrame. This is to isolate from SharePoint CSS ultimately.</p>
  </div>

</body>
</html>`;
myIframe.srcdoc = info;
var body = window.document.querySelector('body');
body.insertBefore(myIframe, body.firstChild);

If you prefer writing the iframe in pure HTML, that works too! Just remember to keep the srcdoc clean for easier readability and maintenance.

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Why is the output [[]] instead of [] after removing the last array like [["1"]] using .splice()?

What are the steps to crafting a personalized message for the valid() method in the JOI library?

The dynamic scope variable in AngularJS is failing to update after a successful HTTP POST request

Update the second dropdown automatically based on the selection in the first dropdown menu

adjustable backdrops

How to Left Align Div Centered Within Another Div?

Is there a way to access the filtered or organized rows in the Quasar Q-Table?

Utilizing Node JS to transfer information from an array of objects into a Postgres table

Invoke a function in Angular when the value of a textarea is altered using JavaScript

What is the best way to incorporate CSS into an Angular 4 project?

Server for Electron application using Node.js

Mastering the art of handling errors with Javascript Promises

Using jQuery to evaluate multiple conditions within an if statement

Implementing automatic token refreshing and automatic logout features in Vue

Ways to include "working hours" if statement a particular holiday dates are specified

The function's name has been obscured by the name of its parameter

Issues with displaying public images in Next.js production build are being reported

The error message "ReferenceError: express is not defined" indicates that Node.js is

Creating a nested list component using an array of objects

Connections between Wordpress websites and CSS styling