framework Custom attribute causes custom element styles to be re-injected into head

I'm submitting a bug report

From stack overflow by request of @AshleyGrant.

Library Version:
- bootstrapper: ^2.0.1
  - framework: 1.0.8

Please tell us about your environment:

Operating System: Windows 10
Node Version: 7.7.3
NPM Version: 4.1.2
JSPM JSPM 0.17.0-beta.42
Browser: Chrome 59 (no other supported browser supports Shadow DOM)
Language: ESNext

Current behavior: Shadow DOM scoped CSS includes are injected into the shadow root and into <head>.

Expected/desired behavior: Shadow DOM scoped CSS includes are injected only into the shadow root.

From Stack Overflow: In my aurelia application, one of my custom elements panel (shadow DOM) includes another custom element widget (shadow DOM) that has a custom attribute own-attribute (template controller) on it. panel has a scoped stylesheet (<require from="./panel.css" as="scoped"></require>). While compiling, aurelia correctly injects ./panel.css into the shadow root of panel. However, in a separate step, while compiling own-context on widget within panel, aurelia injects ./panel.css into <head>, thus breaking the abstraction of custom element stylesheets and generally playing havoc with my app.

How do I fix this?

I tried making a plunker here but it doesn't work. I'm using ES2017 so that makes life more complicated.

panel is being compiled by ViewCompiler.compile()
This calls ViewCompiler._compileNode()
This calls itself on widget
This calls ViewCompiler._compileElement() on widget
This detects own-context as a "lifting instruction" and calls HtmlBehaviorResource.compile()
This calls ViewCompiler.compile() on widget
As a beforeCompile invokeHook, CSSViewEngineHooks.beforeCompile(), is called, which injects a bunch of styles into <head>

This is an issue. HtmlBehaviorResource.compile()'s call to ViewResource.compile() does not pass a compile instruction, so the latter uses the default. Thus the CSS hooks don't get the message that they should be injecting into the shadow root. Not to mention this is double-injecting these styles for no good reason.

at eval (eval at injectStyles (http://example.com/jspm/npm/[email protected]/aurelia-pal-browser.js), <anonymous>:1:11)
at Object.injectStyles (http://example.com/jspm/npm/[email protected]/aurelia-pal-browser.js:434:27)
at ViewCSS.beforeCompile (http://example.com/jspm/npm/[email protected]/css-resource.js:105:25)
at ViewResources._invokeHook (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:1281:25)
at ViewCompiler.compile (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:2509:17)
at HtmlBehaviorResource.compile (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:3972:46)
at ViewCompiler._compileElement (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:2813:40)
at ViewCompiler._compileNode (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:2543:23)
at ViewCompiler._compileNode (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:2565:33)
at ViewCompiler.compile (http://example.com/jspm/npm/[email protected]/aurelia-templating.js:2512:12)

panel.js

import { useShadowDOM, customElement } from 'aurelia-templating';

export { PanelModule };

@useShadowDOM
@customElement('panel-elem')
class PanelModule {}

panel.html

<template>
    <require from="./panel.css" as="scoped"></require>

    <require from="lib:widget"></require>
    <require from="lib:own-context"></require>

    <widget-elem own-context>
        <content>
            some content
        </content>
    </widget-elem>
</template>

widget.js

import { useShadowDOM, customElement } from 'aurelia-templating';

export { WidgetModule };

@useShadowDOM
@customElement('widget-elem')
class WidgetModule {}

widget.html

<template>
    <require from="./widget.css" as="scoped"></require>

    <div id="thing">
        <slot></slot>
    </div
</template>

own-context.js

import { inject, templateController, BoundViewFactory, ViewSlot } from 'aurelia-framework';
import { createOverrideContext } from 'aurelia-binding';

// from https://github.com/aurelia/templating/issues/411
@templateController
@inject(BoundViewFactory, ViewSlot)
class OwnContextCustomAttribute {
    constructor(factory, slot) {
        this.factory = factory; 
        this.slot = slot;
    }

    bind(bindingContext, overrideContext) {
        let newContext = { };
        overrideContext = createOverrideContext(newContext, overrideContext); 

        if (!this.view) {
            this.view = this.factory.create(); 
            this.view.bind(newContext, overrideContext); 
            this.slot.add(this.view); 
        } else { 
            this.view.bind(newContext, overrideContext); 
        } 
    }

    unbind() {
        if (this.view)
            this.view.unbind();
    }
}

Jul 23 '17 22:07 firelizzard18

From stack overflow: I seem to have things working. I patched aurelia/templating-resources/css-resource.js:

 beforeCompile(content: DocumentFragment, resources: ViewResources, instruction: ViewCompileInstruction): void {
+  if (this.done) {
+      return
+  } else {
+      this.done = true
+  }
   if (instruction.targetShadowDOM) {
     DOM.injectStyles(this.css, content, true);
   } else if (FEATURE.scopedCSS) {
     let styleNode = DOM.injectStyles(this.css, content, true);
     styleNode.setAttribute('scoped', 'scoped');
   } else if (!this.owner._alreadyGloballyInjected) {
     DOM.injectStyles(this.css);
     this.owner._alreadyGloballyInjected = true;
   }
 }

Jul 23 '17 22:07 firelizzard18

I have been running with this patch for a week plus and nothing weird has happened.

Jul 23 '17 22:07 firelizzard18

I wish all issues were this thorough!

Jul 24 '17 01:07 AshleyGrant

framework framework copied to clipboard

Custom attribute causes custom element styles to be re-injected into head

panel.js

panel.html

widget.js

widget.html

own-context.js

framework
framework copied to clipboard