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 Declarative Shadow DOM polyfill support to polyfill plugin #901

Closed
1 of 5 tasks
Tracked by #956
thescientist13 opened this issue Feb 27, 2022 · 1 comment · Fixed by #944 or #956
Closed
1 of 5 tasks
Tracked by #956

add Declarative Shadow DOM polyfill support to polyfill plugin #901

thescientist13 opened this issue Feb 27, 2022 · 1 comment · Fixed by #944 or #956
Assignees
@thescientist13
Labels
alpha.0 feature New feature or request Plugins Greenwood Plugins question Further information is requested SSR v0.26.0
Milestone
1.0

Comments

@thescientist13
Copy link
Member

thescientist13 commented Feb 27, 2022 •
edited
Loading

Type of Change

  • New Feature Request
  • Documentation / Website
  • Improvement / Suggestion
  • Bug
  • Other (please clarify below)

Summary

Since Declarative Shadow DOM is not supported in all browsers, a polyfill is required otherwise using Declarative Shadow DOM (SSR or data-gwd-opt="static") will not work in Safari or Firefox currently. See AnalogStudiosRI/www.tuesdaystunes.tv#4 for an example

Chrome (expected)
Screen Shot 2022-02-27 at 12 36 18 PM

Firefox / Safari (no content)
Screen Shot 2022-02-27 at 12 36 33 PM

Details

Effectively it would just be as simple as adding a polyfills flag that adds a conditional check around the polyfill here. This needs to come at the end of document before the </body> tag.

What is interesting though, is shouldn't as much of the static HTML still show up anyway? I know it is wrapped in <template> tags but shouldn't the "valid" markup like <h1>, <img> etc still show up anyway?

<body>
    
    <section>
      <tt-header><template shadowroot="[open]()"><style>
    h1 {
      width: 90%;
      margin: 30px auto;
      text-align: center;
    }
  </style><!--lit-part 1dQVzEiXVpM=-->
      <header>
       <h1>Coming Soon!</h1>
      </header>
    <!--/lit-part--></template></tt-header>
    </section>

    <section>
      <main>
        <tt-banner><template shadowroot="[open]()"><style>
    img {
      display: block;
      width: 50%;
      margin: 0 auto 20px;
    }
  </style><!--lit-part bzQrwU2cJWo=-->
      <div>
        <img src="[/assets/tuesdays-tunes.jpg](view-source:http://localhost:8080/assets/tuesdays-tunes.jpg)"/>
      </div>
    <!--/lit-part--></template></tt-banner>
      </main>
    </section>


    <section>
      <tt-footer><template shadowroot="[open]()"><style>
    footer {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      color: white;
    }
  </style><!--lit-part CwV44/uBt1A=-->
      <footer>
        <slot></slot>
        <h5>&copy; <!--lit-part-->2022<!--/lit-part--> - Tuesday's Tunes / Analog Studios</h5>
      </footer>
    <!--/lit-part--></template>
        <a href="[https://www.youtube.com/user/analogstudios](view-source:https://www.youtube.com/user/analogstudios)">YouTube</a> |
        <a href="[https://www.facebook.com/dave.flamand.1426](view-source:https://www.facebook.com/dave.flamand.1426)">Facebook</a> |
        <a href="[https://open.spotify.com/playlist/1jOFrovuxCGulkGdUhR5f7?si=R1ZowQxqSRefj6HLOasSEQ&nd=1](view-source:https://open.spotify.com/playlist/1jOFrovuxCGulkGdUhR5f7?si=R1ZowQxqSRefj6HLOasSEQ&nd=1)">Spotify</a>
      </tt-footer>
    </section>

    
  
  </body>
@thescientist13 thescientist13 added question Further information is requested Plugins Greenwood Plugins SSR labels Feb 27, 2022
@thescientist13 thescientist13 added this to the 1.0 milestone Feb 27, 2022
@thescientist13 thescientist13 mentioned this issue Feb 27, 2022
Closed
5 tasks
@thescientist13 thescientist13 added the feature New feature or request label Mar 15, 2022
@thescientist13 thescientist13 mentioned this issue Mar 27, 2022
Closed
@thescientist13 thescientist13 self-assigned this Mar 27, 2022
@thescientist13
Copy link
Member Author

thescientist13 commented Jun 15, 2022 •
edited
Loading

In retrospect, I think this might be better implemented in our standard polyfills plugin since for an upcoming native Greenwood solution for HTMLElement, which will also need Declarative Shadow DOM, it doesn't really make sense to make it exclusive to a particular library.

@thescientist13 thescientist13 mentioned this issue Jun 17, 2022
Merged
1 task
@thescientist13 thescientist13 changed the title add Declarative Shadow DOM polyfill support for Lit Renderer plugin add Declarative Shadow DOM polyfill support to polyfills plugin Jun 17, 2022
@thescientist13 thescientist13 mentioned this issue Jul 1, 2022
Merged
19 tasks
@thescientist13 thescientist13 linked a pull request Jul 1, 2022 that will close this issue
release/0.26.0 #956
Merged
19 tasks
@thescientist13 thescientist13 changed the title add Declarative Shadow DOM polyfill support to polyfills plugin add Declarative Shadow DOM polyfill support to polyfill plugin Jul 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thescientist13 thescientist13

Labels
alpha.0 feature New feature or request Plugins Greenwood Plugins question Further information is requested SSR v0.26.0
Projects
None yet
Milestone
1.0
1 participant
@thescientist13