Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] in-element cannot render into a document-fragment #20643

Open
Tracked by #20644
NullVoxPopuli opened this issue Feb 4, 2024 · 0 comments
Open
Tracked by #20644

[Bug] in-element cannot render into a document-fragment #20643

NullVoxPopuli opened this issue Feb 4, 2024 · 0 comments

Comments

@NullVoxPopuli
Copy link
Contributor

This is basically the same as: #20641

but with this code:
(notice the .content)

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';
import { precompileTemplate } from '@ember/template-compilation';

import { modifier } from 'ember-modifier';

import type { ComponentLike } from '@glint/template';

// index.html has the production-fingerprinted references to these links
// Ideally, we'd have some pre-processor scan everything for references to
// assets in public, but idk how to set that up
const getStyles = () => [...document.head.querySelectorAll('link')].map((link) => link.href);


const Shadow = setComponentTemplate(precompileTemplate(`
  <template shadowrootmode="open" ...attributes>
    {{yield}}
  </template>
`, { strictMode: true }), templateOnly('shadow', 'Shadow')) as ComponentLike<{
  Element: HTMLTemplateElement;
  Args: {};
  Blocks: { default: [] }
}>;

export class Shadowed extends Component<{
  Element: HTMLDivElement;
  Args: {
    omitStyles?: boolean;
  };
  Blocks: { default: [] };
}> {
  @tracked shadow: ShadowRoot | undefined | null;
  
  getShadowRef = modifier((element: HTMLTemplateElement) => {
    this.shadow = element.content; 
  }); 

<template>
  <div data-shadow ...attributes>
    <Shadow {{this.getShadowRef}} />

    {{#if this.shadow}}
      {{#in-element this.shadow}}
        {{#unless @omitStyles}}
          {{#each (getStyles) as |styleHref|}}
            <link rel="stylesheet" href={{styleHref}} />
          {{/each}}
        {{/unless}}

        {{yield}}
      {{/in-element}}
  {{/if}}
  </div>
</template>;
}

export default Shadowed;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant