migs/web_components_practice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added some styling

Browse source
This commit is contained in:
Miguel 2024-06-24 20:57:40 -04:00
parent 3dd75c22c5
commit a5f6c383f1
4 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
font/KHMenu.otf Normal file
View file

Binary file not shown.

3
index.html
View file

@ -19,12 +19,11 @@
<h3>Check out these custom web components below!</h3> <h3>Check out these custom web components below!</h3>
<h4>Web Component 1</h4> <h4>Web Component 1</h4>
<poots-poot> <poots-poot>
<h4 slot="keyblades">my favorite keyblades</h4> <h4 slot="keyblades">my favorite keyblades</h4>
<ul slot="list"> <ul slot="list" style="font-family: KHMenu;">
<li> <li>
Kingdom Key Kingdom Key

6
main.css
View file

@ -0,0 +1,6 @@
@font-face {
font-family: 'KHMenu';
src: url('font/KHMenu.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

24
poots.js
View file

@ -1,5 +1,29 @@
const template = document.createElement('template') const template = document.createElement('template')
template.innerHTML = ` template.innerHTML = `
<style>
@font-face {
font-family: 'KHMenu';
src: url('font/KHMenu.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
div {
border: 1px solid;
}
h2 {
font-family: KHMenu
}
:host {
background-color: purple
display: block;
}
</style>
<div> <div>
<h2> WEPA! </h2> <h2> WEPA! </h2>