Allow importing code to determine where styles are inserted #328

grommett · 2018-06-17T08:41:51Z

This is a feature request.

Problem

As far as I can tell, the style loader only allows for styles to be inserted into one location, either the <head> or where specified in the inserInto string or function.

This approach does not work with composed/nested custom elements, as each can have their own shadow dom. If, for example, insertInto specifies the root custom element the styles are not picked up in children shadow doms.

Feature Request

Allow importing code to determine where styles are inserted.

Possible Solution

Add an option for local insertion. Let's call it localInsert, which defaults to false so that code executes as it currently does.
When localInsert is true, the update function is not invoked and we attach a method (localInsertTo ?) to exports, which allows for the importing file(s) to determine where the styles are inserted.

Example

In the example below each custom element will have their imported styles inserted into their respective shadow doms by calling the localInsertTo.

Webpack

...
options: {
  localInsert: true
}
...

Parent

import css from './parent.css';

export class Parent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
    <div>Parent 
      <x-child></x-child>
    </div>`;
    css.localInsertTo(this.shadow);
  }
}

customElements.define('x-app', Parent);

Child

import css from './child.css';

export class Child extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `<div>child</div>`;
    css.localInsertTo(this.shadow);
  }
}

customElements.define('x-child', Child);

The text was updated successfully, but these errors were encountered:

bcanseco · 2018-07-30T05:14:31Z

Having a similar issue, this would be an awesome feature!

grommett · 2018-07-30T15:12:23Z

@bcanseco
If you're interested I played with this idea and actually got it working. I'm not sure if it meets your use case, but have a look at the code in the repo I was playing with it in.

Loader files are here: https://github.com/grommett/web-components/tree/master/html-loader-css-modules/loaders

Usage(webpack.config) here:
https://github.com/grommett/web-components/blob/master/html-loader-css-modules/webpack.config.js

This lets users reference their own string selector inside the insertInto function. Necessary until webpack-contrib#328 is resolved.

alexander-akait · 2018-11-29T18:23:56Z

Sorry for big delay, PR welcome

alexander-akait · 2019-07-29T11:45:00Z

We have useable api, i think we need improve this, adding more option for style.use() or maybe implement new api, it should be easy, so PR welcome, anyway will be implemented for 2.0.0 version

alexander-akait · 2019-07-30T14:12:44Z

For better compatibility with css modules from w3 spec (not to be confused with css-modules from css-loader), we need export css styleSheet as String and do:

import styles from './custom-square.css';

class CustomSquare extends HTMLElement {
  // Specify observed attributes so that
  // attributeChangedCallback will work
  static get observedAttributes() {
    return ['l'];
  }

  constructor() {
    // Always call super first in constructor
    super();

    this.attachShadow({ mode: 'open' });
  }
  connectedCallback() {
    const div = document.createElement('div');

    this.shadowRoot.appendChild(div);

    const bgPurple = new CSSStyleSheet();

    bgPurple.replace(styles);

    this.shadowRoot.adoptedStyleSheets = [bgPurple];
  }
}

customElements.define('custom-square', CustomSquare);

mike-shtil · 2019-12-16T10:57:46Z

For better compatibility with css modules from w3 spec (not to be confused with css-modules from css-loader), we need export css styleSheet as String and do:

import styles from './custom-square.css';

class CustomSquare extends HTMLElement {
  // Specify observed attributes so that
  // attributeChangedCallback will work
  static get observedAttributes() {
    return ['l'];
  }

  constructor() {
    // Always call super first in constructor
    super();

    this.attachShadow({ mode: 'open' });
  }
  connectedCallback() {
    const div = document.createElement('div');

    this.shadowRoot.appendChild(div);

    const bgPurple = new CSSStyleSheet();

    bgPurple.replace(styles);

    this.shadowRoot.adoptedStyleSheets = [bgPurple];
  }
}

customElements.define('custom-square', CustomSquare);

This looks like an elegant approach, however import styles from './custom-square.css' would only return a map of key:classname, not the compiled CSS string. Am I missing something?

alexander-akait · 2019-12-16T11:17:19Z

@mike-shtil it is only return css nothing more, for better w3c compatibility with css modules spec (do not confuse with css modules from css-loader)

Allow to pass additional parameter to `style.use(anything)` which will be passed to `insert` function. This allows to insert each tag in different places and especially useful for Shadow DOM Resolves webpack-contrib#328

alexander-akait · 2021-09-14T14:52:12Z

There are two solution for shadow DOM:

https://github.com/webpack-contrib/style-loader#function, I will move this to example
Feat export stylesheet css-loader#1368 will be finished today/tomorrow (no need style-loader, but require CSSStyleSheet support, you can polyfill this, I will provide example in css-loader), note for HMR you need to write it manually, I will provide small example too

Original style-loader styleTag and singletonStyleTag is not designed for this case, in theory it is possible using hacks, but better avoid it

grommett changed the title ~~Allow for localInsertTo option so that each file can determine where styles are inserted~~ Allow importing code to determine where styles are inserted Jun 18, 2018

bcanseco added a commit to bcanseco/style-loader that referenced this issue Jul 30, 2018

feat(options): Add selector property to schema

558665f

This lets users reference their own string selector inside the insertInto function. Necessary until webpack-contrib#328 is resolved.

alexander-akait added this to the 2.0.0 milestone Jul 29, 2019

alexander-akait added priority: 5 (nice to have) semver: Minor type: Feature labels Jul 29, 2019

alexander-akait mentioned this issue Sep 2, 2020

preserve toString() from css-loader #481

Closed

alexander-akait mentioned this issue Oct 7, 2020

Extract CSS on JS file webpack/webpack#11593

Closed

OlegWock mentioned this issue Sep 12, 2021

feat: allow to pass options to insert function through style.use() #535

Merged

6 tasks

alexander-akait closed this as completed in #535 Sep 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow importing code to determine where styles are inserted #328

Allow importing code to determine where styles are inserted #328

grommett commented Jun 17, 2018 •

edited

Loading

bcanseco commented Jul 30, 2018 •

edited

Loading

grommett commented Jul 30, 2018

alexander-akait commented Nov 29, 2018

alexander-akait commented Jul 29, 2019

alexander-akait commented Jul 30, 2019 •

edited

Loading

mike-shtil commented Dec 16, 2019

alexander-akait commented Dec 16, 2019

alexander-akait commented Sep 14, 2021 •

edited

Loading

Allow importing code to determine where styles are inserted #328

Allow importing code to determine where styles are inserted #328

Comments

grommett commented Jun 17, 2018 • edited Loading

Problem

Feature Request

Possible Solution

Example

bcanseco commented Jul 30, 2018 • edited Loading

grommett commented Jul 30, 2018

alexander-akait commented Nov 29, 2018

alexander-akait commented Jul 29, 2019

alexander-akait commented Jul 30, 2019 • edited Loading

mike-shtil commented Dec 16, 2019

alexander-akait commented Dec 16, 2019

alexander-akait commented Sep 14, 2021 • edited Loading

grommett commented Jun 17, 2018 •

edited

Loading

bcanseco commented Jul 30, 2018 •

edited

Loading

alexander-akait commented Jul 30, 2019 •

edited

Loading

alexander-akait commented Sep 14, 2021 •

edited

Loading