Leveraging vanilla web components in combination with a bootstrap template

Question

Leveraging vanilla web components in combination with a bootstrap template

Currently, my ASP.NET MVC website is styled using the Metronic Bootstrap template.

I am contemplating the idea of revamping this website by implementing the vanilla web components approach.

In a preliminary test, I created a web component without shadow DOM and noticed that it seamlessly adopted the Metronic style from its parent page.

However, upon enabling shadow DOM, the CSS inheritance ceased, causing my web component to no longer reflect the Metronic style.

Now faced with this dilemma, I am unsure about the best approach: Should I forego shadow DOM to maintain the design consistency at the expense of full encapsulation benefits provided by web components?

How do you suggest handling the integration of a comprehensive Bootstrap template like Metronic with web components? Is the effort worthwhile, or are there specific guidelines for navigating such a scenario?

javascript html css asp.net web-component

Answer 1

Answer №1

When working with large CSS frameworks in ShadowDOM based Web Components, it's important to include the necessary CSS within each component to ensure its styling is maintained.

ShadowDOM was specifically created to isolate internal styles from external CSS, so any specific styling required for the ShadowDOM must be included within the component itself.

The easiest way to achieve this is by using the <link> tag within the ShadowDOM, just as you would outside of the components.

class MyElement extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
    <link href="my.css" rel="stylesheet">
    <h2 class="my-header">My Component</h2>
    <button class="my-button">Pay me</button>`;
  }
}

customElements.define('my-element', MyElement);

<link href="my.css" rel="stylesheet">
<div class="my-thing">Stuff</div>
<button class="my-button">Click me</button>
<hr/>
<my-element></my-element>

Without the presence of a file named my.css, there won't be any visible changes rendered.

This approach ensures that the CSS is applied both on the main page and within the Components themselves.

Answer 2

When working with large CSS frameworks in ShadowDOM based Web Components, it's important to include the necessary CSS within each component to ensure its styling is maintained.

ShadowDOM was specifically created to isolate internal styles from external CSS, so any specific styling required for the ShadowDOM must be included within the component itself.

The easiest way to achieve this is by using the <link> tag within the ShadowDOM, just as you would outside of the components.

class MyElement extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
    <link href="my.css" rel="stylesheet">
    <h2 class="my-header">My Component</h2>
    <button class="my-button">Pay me</button>`;
  }
}

customElements.define('my-element', MyElement);

<link href="my.css" rel="stylesheet">
<div class="my-thing">Stuff</div>
<button class="my-button">Click me</button>
<hr/>
<my-element></my-element>

Without the presence of a file named my.css, there won't be any visible changes rendered.

This approach ensures that the CSS is applied both on the main page and within the Components themselves.

Leveraging vanilla web components in combination with a bootstrap template

Answer №1

Similar questions

Issue encountered: React module not detected while attempting to execute npm start command

Problems with Styling the Header Navigation

Creating numerous presentations without the need for excessive copying and pasting

Creating a Dropdown Menu: Connecting Multiple Buttons to a JavaScript Function

Is it necessary for material-ui useStyles to use the entire props object?

Inconsistent positioning of CSS tooltips when using insertBefore() function

Immutability in ASP.NET 5 (also known as Core 1.0) Configuration

Encountering the error "undefined object" while using the yield keyword in JavaScript

Track the amount of views on an AngularJS page and display the total count

What causes the device pixel ratio to vary across different web pages on the same device and operating system?

Opting to monitor element visibility over relying solely on page load with Neustar WPM

Handling click events for parent and child elements in Angular 5

Tips for properly formatting large numbers

Test the functionality of clicking on buttons in a specific order within a given set

Expanding an abstract class with Typescript

What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

Learn how to grant permissions to staff members by utilizing checkbox options in asp.net C#

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

npm is having trouble locating the module called 'encoding'

How to create line breaks in Angular Material matTooltip elements?