mistyharsh

const config = {
  // Entry point and output
  entry: './src/index.js',
  output: {
    path: process.cwd() + '/dist',
    filename: 'output.js',
  },

  mode: 'production',
};

mistyharsh

module.exports = {

  entry: { /* config */ },

  output: { /* config */ },

  module: {
    rules: [
      // Regular css files
      {

mistyharsh

const sheet = new CSSStyleSheet();

// Replace all styles synchronously for this style sheet
sheet.replaceSync('p { color: green; }');

class FancyComponent1 extends HTMLElement {

  constructor() {
    super();

mistyharsh

// Create style node outside of WebComponent
const style = document.createElement('style');

style.innerHTML = `
  p { color: blue; }
`;

class FancyComponent extends HTMLElement {

  constructor() {

mistyharsh

class FancyComponent extends HTMLElement {

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    shadowRoot.innerHTML = `
      <!-- Styles are scoped -->
      <style>