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.

Sign up for GitHub

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

Jump to bottom

Add a unique identifier to a component's style #54869

Open
EnochGao opened this issue Mar 15, 2024 · 5 comments
Open

Add a unique identifier to a component's style #54869

EnochGao opened this issue Mar 15, 2024 · 5 comments
Labels
area: compiler Issues related to `ngc`, Angular's template compiler core: stylesheets needs: clarification This issue needs additional clarification from the reporter before the team can investigate.
Milestone
needsTriage

Comments

@EnochGao
Copy link

Which @angular/* package(s) are relevant/related to the feature request?

compiler

Description

Now the component's style will generate a style tag that will be inserted into the html header. When I render the component into the iframe, I find that I can't easily filter out the component's style

Proposed solution

@Component({
  selector: 'wk-trade-good-evaluate-pdf',
  templateUrl: './good-evaluate-pdf.component.html',
  styleUrls: [{path:'./good-evaluate-pdf.component.less',title:'custom-title'}],
})
export class Component {}
<!DOCTYPE html>
<html >
  <head>
      <style title="custom-title"></style>
  </head>
</html>
 const componentStyles=Array.from(document.styleSheets).filter((sheet) => {sheet.title==='custom-title'});

Alternatives considered

none
@dylhunn dylhunn added area: compiler Issues related to `ngc`, Angular's template compiler core: stylesheets labels Mar 27, 2024
@ngbot ngbot bot modified the milestone: needsTriage Mar 27, 2024
@JoostK JoostK self-assigned this May 15, 2024
@JoostK
Copy link
Member

JoostK commented May 15, 2024

We don't fully understand what the use case for such a feature would be, so it would be helpful if you could expand on that.

One reason we could think of was for debugging/inspection purposes. For that, you can use DevTool's style inspector:

image

Clicking the <style> text in the top right of the rule shows the relevant style element in the Elements tree.

It is unlikely that we'd introduce user-facing abilities to annotate style elements, but we did mention the potential to prepend a comment node before a style element with the component's class name. That would be a devmode-only thing, though, in which case we still feel that DevTool's style inspector is the better approach here.

@JoostK JoostK added the needs: clarification This issue needs additional clarification from the reporter before the team can investigate. label May 15, 2024
@JoostK JoostK removed their assignment May 15, 2024
@EnochGao
Copy link
Author

@JoostK
Appreciate your reply. The challenge I'm encountering goes like this: I have the necessity to facilitate printing directly from a browser. However, due to browser constraints, I'm resorting to using iframes. When duplicating components within an iframe, DOM elements acquire fingerprinting attributes, which complicates matters. Consequently, I'm tasked with identifying and relocating style tags that are dynamically generated by these components into the iframe to ensure proper formatting during print. Unfortunately, pinpointing the exact matching style tags isn't a straightforward task; they aren't equipped with unique identifiers. This leaves me with the laborious option of traversing through the content of styles, a method that is not only inefficient but also predisposes to conflicts.

@EnochGao
Copy link
Author

pseudo code snippet:

<nzx-print-v
  #nzxPrintV
  [enablePreview]="true"
  printTitle="HUAWEI Mate 60 Pro">
  <div nzxPrintHeader>
    <button nz-button nzType="primary" (click)="nzxPrintV.print()">
      print
    </button>
  </div>
  <div nzxPrintContent [identifierStr]="'.mate-pro-header'">
    <nzx-good-evaluate-pdf-v></nzx-good-evaluate-pdf-v>
    <!-- `nzx-good-evaluate-pdf-v` is the template component designated for printing.
    '.mate-pro-header' refers to the style class defined within the component's CSS.
    Eventually, component 'nzx-good-evaluate-pdf-v' will be placed within an iframe.
    However, I need to extract the styles from the current document and insert them into the iframe's header.
    The challenge arises from the multitude of other styles present in the current document, making it inconvenient to readily identify and isolate the styles generated by this particular component.
    Consequently, I've resorted to using style classes written directly within the component, but this approach is prone to naming conflicts. -->
  </div>
</nzx-print-v>

@JoostK
Copy link
Member

JoostK commented May 15, 2024

I (sort of) see. You might have some success with ShadowDOM encapsulation, as then the styles would be placed within the shadow root. That might come with problems of its own or not be sufficient in terms of which styles you need to clone.

That said, this is quite a niche problem and I don't think the framework will be of any help here.

@EnochGao
Copy link
Author

Indeed, I'm not inclined towards using Shadow DOM, as typically there's a shared common stylesheet across the global scope for component libraries. It's true that this poses minimal impact when everything operates under a single document, but complications arise when dealing with multiple documents or attempting to locate component style sheets, where efficiently querying for specific component styles becomes inconvenient.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: compiler Issues related to `ngc`, Angular's template compiler core: stylesheets needs: clarification This issue needs additional clarification from the reporter before the team can investigate.
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
3 participants
@JoostK @dylhunn @EnochGao