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

Proposal: Scoped Style #91

Open
mantaroh opened this issue Feb 10, 2023 · 1 comment
Open

Proposal: Scoped Style #91

mantaroh opened this issue Feb 10, 2023 · 1 comment

Comments

@mantaroh
Copy link
Collaborator

mantaroh commented Feb 10, 2023 •
edited
Loading

What is this?

One of the spear's concept is Component oriented. So we had better to support scoped style and script.
Now, spear treat the component's style as global.

sample-component.spear

<style>
  .sample-component {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<div class="sample-component">
</div>

test.html

<sample-component></sample-component>
<br/>
<div class="sample-component">
</div>

Generated result is the bellow:
image

Almost site might have no problem, but this global scoped style will cause bugs.

How do we implement this feature?

Scoped Style is discussed with WHATWG as well:
whatwg/html#552

<style scoped> is deprecated already. So we might inject the scoped class name or use the Shadow DOM or insert the style as inline to each element.

これは何？

Spear のコンセプトの1つはコンポーネント指向です。そこでスコープスタイルや、スコープスクリプトを導入すべきだと思います。現在、spear はコンポーネントのスタイルをグローバルとして扱います。

sample-component.spear

<style>
  .sample-component {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<div class="sample-component">
</div>

test.html

<sample-component></sample-component>
<br/>
<div class="sample-component">
</div>

生成された結果は次の通りです。
image

ほとんどのサイトでは問題ないと思いますが、グローバルスコープだとバグが発生する可能性があります。

どうやって実装するか？

スコープ限定のスタイルは WHATWG でも議論されていました。
whatwg/html#552

<style scoped> は既に非推奨となっています。なので、スコープ限定のクラス名を注入するか、シャドーDOMを使うか、各要素ごとにインラインスタイルを追加する必要があります。
@mantaroh
Copy link
Collaborator Author

Additional Information for injecting CSS

I looked into astro implementation.
Astro allow the two top element in .astro file. (This file is component file)

---
---
<style>
.container {
	height: 30px;
	width: 100lvw;
}
.container > p {
	text-align: center;
}
</style>

<head class="footer">
  <div class="container">
    <p class="text-muted mb-0 py-2">© 2023 mantaroh All rights reserved.</p>
  </div>
</head>

The first element is scoped style element. It's simple CSS. A second is Component element.
Astro generated the scoped style for injecting class name when building.

index.html

  <div class="container astro-7VHLWIXS">
    <p class="text-muted mb-0 py-2 astro-7VHLWIXS">© 2023 mantaroh All rights reserved.</p>
  </div>

index.183507a9.css

.container:where(.astro-7VHLWIXS) {
  height: 30px;
  width: 100lvw;
}
.container:where(.astro-7VHLWIXS) > p:where(.astro-7VHLWIXS) {
  text-align: center;
}

CSS 注入に関する追加情報

Astro の実装を見てみましたが、Astro は astro ファイルで2つのトップ要素を許可しています(このファイルはコンポーネントです)

---
---
<style>
.container {
	height: 30px;
	width: 100lvw;
}
.container > p {
	text-align: center;
}
</style>

<head class="footer">
  <div class="container">
    <p class="text-muted mb-0 py-2">© 2023 mantaroh All rights reserved.</p>
  </div>
</head>

最初の要素は、スコープ付きのCSS要素で普通の CSS です。2つ目はコンポーネントの要素です。Astro はビルド時にスコープ付きスタイルをクラス名を注入することで実現していました。

index.html

  <div class="container astro-7VHLWIXS">
    <p class="text-muted mb-0 py-2 astro-7VHLWIXS">© 2023 mantaroh All rights reserved.</p>
  </div>

index.183507a9.css

.container:where(.astro-7VHLWIXS) {
  height: 30px;
  width: 100lvw;
}
.container:where(.astro-7VHLWIXS) > p:where(.astro-7VHLWIXS) {
  text-align: center;
}

@mantaroh mantaroh mentioned this issue Aug 28, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mantaroh