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] Don't allow top level sibling elements in component. / 【提案】コンポーネント内のトップレベル兄弟要素を禁止する。 #184

Open
mantaroh opened this issue Aug 28, 2023 · 1 comment
Open

[Proposal] Don't allow top level sibling elements in component. / 【提案】コンポーネント内のトップレベル兄弟要素を禁止する。 #184

mantaroh opened this issue Aug 28, 2023 · 1 comment

Comments

@mantaroh
Copy link
Collaborator

mantaroh commented Aug 28, 2023 •
edited
Loading

What is this?

At the moment, Spear allow sibling elements on components like:

<div>
 <h1>Hello</h1>
</div>
<ul>
  <li> 你好</li>
  <li>Bonghjornu</li>
  <li>سلام</li>
  <li>こんにちは</li>
</ul>

This rule might block some features:

Proposal

Spear don't allow the sibling element on top level of component.
Vue / React / Astro doesn't allow this element as well.

Error component files:

<div>
 <h1>Hello</h1>
</div>
<!-- Following elements are sibling of top div element -->
<ul>
  <li> 你好</li>
  <li>Bonghjornu</li>
  <li>سلام</li>
  <li>こんにちは</li>
</ul>

Concern

This feature might broke exist site which using top-level siblings.
We need the option which enabling this feature like:

export default {
  "projectName": "new-version",
  "supportScopedStyle": true
}

これは何？

現在、Spear は次のような兄弟要素をコンポーネントで許可しています。

<div>
 <h1>Hello</h1>
</div>
<ul>
  <li> 你好</li>
  <li>Bonghjornu</li>
  <li>سلام</li>
  <li>こんにちは</li>
</ul>

このルールは以下の追加しようとする機能で、不要なものになります

提案

Spear のコンポーネントでトップレベルの兄弟要素を許可しないようにする
Vue / React / Astro などでも同じように許可していません。

エラーとなるコンポーネント例：

<div>
 <h1>Hello</h1>
</div>
<!-- 以下の要素は上記 div 要素の兄弟になるのでエラーとなる -->
<ul>
  <li> 你好</li>
  <li>Bonghjornu</li>
  <li>سلام</li>
  <li>こんにちは</li>
</ul>

懸念点

この機能はすでにトップレベルの兄弟要素を利用している既存のサイトを壊す可能性があります。
そのため、以下のような機能を有効にするオプションを用意する必要があります。:

export default {
  "projectName": "new-version",
  "supportScopedStyle": true
}
@mantaroh mantaroh changed the title [Proposal] Don't allow top level sibling elements. [Proposal] Don't allow top level sibling elements in component. / 【提案】コンポーネント内のトップレベル兄弟要素を禁止する。 Aug 29, 2023
@vladinomo
Copy link
Contributor

I'm along with this proposal overall but I am also concerned that the feature forces the user to make awkward HTML markup or requires extra effort in some cases.

  • If the user wants to share some part inside <head> tag like <meta> tags for OGP via spear component, what tag should be used to wrap up them?
  • In case the user wants to renew some site, some components from an old site should be made of sibling components. If top-level siblings are not allowed, they have to wrap them with an element not used in the old one. The styles of the new site could collapse in this situation.

Vue / React / Astro doesn't allow this element as well.
These libraries provide workarounds for such cases and it also should be promoted for this library.

基本的にこのプロポーサルの趣旨に同意していますが、この変更が加えられると、一部のケースでユーザーに対して不自然なマークアップを強制させたり、あるいは追加の作業を強いてしまう事がありえてしまいます。

  • <head> タグ内で例えばogp関連のメタタグをまとめて使いまわしたい場合は、トップレベルに用いるための適切なコンポーネントが見当たらないと思います。
  • サイトのリニューアルなどの際に、既存のサイトから一部をコンポーネント化してもともとなかった要素をトップレベルにおいた場合など、スタイルが崩れて既存の試算がそのまま使えなくなる可能性があります。

Vue / React / Astro などでも同じように許可していません

これらのライブラリでも実は抜け道があったりして、spearにも必要になると思われます。

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
2 participants
@vladinomo @mantaroh