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

leverage <template> element for footer and header custom element examples #85

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

leverage <template> element for footer and header custom element examples #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 35 additions & 35 deletions src/components/footer/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
export default class FooterComponent extends HTMLElement {
// run some code to set HTML when the component is ready
connectedCallback() {
this.innerHTML = this.getTemplate();
}
// create templates that interpolate variables and HTML!
const template = document.createElement('template');
const year = new Date().getFullYear();
template.innerHTML = `
<style>
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #192a27;
min-height: 30px;
padding-top: 10px;
}
.footer a {
color: #efefef;
text-decoration: none;
}
.footer h4 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
</style>

<footer class="footer">
<h4>
<a href="https://www.greenwoodjs.io/">My Blog &copy;${year} &#9672 Built with GreenwoodJS</a>
</h4>
</footer>
`;

// create templates that interpolate variables and HTML!
getTemplate() {
const year = new Date().getFullYear();

return `
<style>
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #192a27;
min-height: 30px;
padding-top: 10px;
}
.footer a {
color: #efefef;
text-decoration: none;
}
.footer h4 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
</style>

<footer class="footer">
<h4>
<a href="https://www.greenwoodjs.io/">My Blog &copy;${year} &#9672 Built with GreenwoodJS</a>
</h4>
</footer>
`;
export default class FooterComponent extends HTMLElement {
// run some code to set HTML when the component is ready
connectedCallback() {
this.innerHTML = template.content.cloneNode(true);
Copy link
Member

@thescientist13 thescientist13 Apr 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, this is breaking the build for me locally too and I think is just a mismatch between Light DOM / DSD.

But as a quick test, this would work

export default class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template.innerHTML;
  }
}

Getting closer to DSD conventions this works...

export default class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.appendChild(template.content.cloneNode(true));
  }
}

However, this will render everything out into a DSD (e.g. <template shadowrootmode="open">...</template> (naturally) which is not really what we want here since we are explicitly looking to render out only to Light DOM for these components.

So yeah, I think this is the form we want to go with here

export default class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template.innerHTML;
  }
}

edit: Not sure that will actually work, let me keep looking into this, will try and get a conclusive answer for you.

}
}

Expand Down
130 changes: 66 additions & 64 deletions src/components/header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,79 @@
export default class HeaderComponent extends HTMLElement {
// run some code to set HTML when the component is ready
connectedCallback() {
this.innerHTML = this.getTemplate();
}

// create templates that interpolate variables and HTML!
getTemplate() {
return `
<style>
.header {
background-color: #192a27;
min-height: 30px;
padding: 10px;
font-size: 1.2rem;
}
const template = document.createElement('template');
template.innerHTML = `
<style>
.header {
background-color: #192a27;
min-height: 30px;
padding: 10px;
font-size: 1.2rem;
}

.header h4 {
margin: 0 auto;
padding: 4px 0 0 10px;
display: inline-block;
color: #efefef;
}
.header h4 {
margin: 0 auto;
padding: 4px 0 0 10px;
display: inline-block;
color: #efefef;
}

.head-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.head-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}

.brand {
justify-items: left;
padding: 10px;
}
.brand {
justify-items: left;
padding: 10px;
}

.brand img {
float:left;
height: 30px;
width: 30px;
}
.brand img {
float:left;
height: 30px;
width: 30px;
}

.header .social {
margin-left:auto;
text-align: right;
}
.header .social {
margin-left:auto;
text-align: right;
}

.header img.github-badge {
display: inline-block;
width: 90px;
height: 20px;
}

</style>

<header class="header">
<div class="head-wrap">
<div class="brand">
<a href="/">
<img src="/assets/greenwood-logo.png" alt="Greenwood logo"/>
<h4>My Personal Blog</h4>
</a>
</div>
<div class="social">
<a href="https://github.com/ProjectEvergreen/greenwood">
<img
src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github"
alt="Greenwood GitHub badge"
class="github-badge"/>
</a>
</div>
</div>
</header>
`;

.header img.github-badge {
display: inline-block;
width: 90px;
height: 20px;
}

</style>

<header class="header">
<div class="head-wrap">
<div class="brand">
<a href="/">
<img src="/assets/greenwood-logo.png" alt="Greenwood logo"/>
<h4>My Personal Blog</h4>
</a>
</div>
<div class="social">
<a href="https://github.com/ProjectEvergreen/greenwood">
<img
src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github"
alt="Greenwood GitHub badge"
class="github-badge"/>
</a>
</div>
</div>
</header>
`;
export default class HeaderComponent extends HTMLElement {
// run some code to set HTML when the component is ready
connectedCallback() {
this.innerHTML = template.content.cloneNode(true);
}

}

customElements.define('app-header', HeaderComponent);