fix: proper header styling

packages/core/demo/index.html

@@ -572,6 +572,15 @@ <h3 class="title">Inline fields with a thumbnail</h3>
 						</discord-embed>
 					</discord-message>
 				</discord-messages>
+
+				<h3 class="title">Headers</h3>
+				<discord-messages>
+					<discord-message profile="favna">
+						<discord-header level="1">This is a header 1</discord-header>
+						<discord-header level="2">This is a header 2</discord-header>
+						<discord-header level="3">This is a header 3</discord-header>
+					</discord-message>
+				</discord-messages>
 			</main>
 		</div>
 	</body>

packages/core/src/components/discord-header/DiscordHeader.ts

@@ -4,30 +4,30 @@ import { customElement, property } from 'lit/decorators.js';
 @customElement('discord-header')
 export class DiscordHeader extends LitElement {
 	public static override styles = css`
-		:host {
+		:host > * {
 			margin: 16px 0 8px;
 			font-weight: 700;
 			line-height: 1.375em;
 		}
 
-		:host([level='1']) {
+		:host([level='1']) > h1 {
 			font-size: 1.5rem;
 		}
 
-		:host([level='2']) {
+		:host([level='2']) > h2 {
 			font-size: 1.25rem;
 		}
 
-		:host([level='3']) {
+		:host([level='3']) > h3 {
 			font-size: 1rem;
 		}
 
-		:host([level='1']):first-child(),
-		:host([level='2']):first-child() {
+		:host([level='1']):first-child() > h1,
+		:host([level='2']):first-child() > h2 {
 			margin-top: 8px;
 		}
 
-		:host([level='3']):first-child() {
+		:host([level='3']):first-child() > h3 {
 			margin-top: 4px;
 		}
 	`;
@@ -58,6 +58,9 @@ export class DiscordHeader extends LitElement {
 			case 3: {
 				return html`<h3><slot></slot></h3>`;
 			}
+			default: {
+				return html`<slot></slot>`;
+			}
 		}
 	}
 }