Skip to content

bug: v4 Scoped Component Issues #5335

@yigityuce

Description

@yigityuce

Prerequisites

Stencil Version

4.12.1

Current Behavior

Regarding the discussion in here we started to test out the "scoped" component approach. Please take a look at our checklist below and the status.

Terms:

  • "with slot fixes": experimentalSlotFixes and scopedSlotTextContentFix configs are applied
  • "without slot fixes": experimentalSlotFixes and scopedSlotTextContentFix configs are NOT applied

Status:

Test Case Description with slot fixes without slot fixes PR
✅ Dynamic Tag We need to have a dynamically updatable slot parent tag name to pass the accessibility audits OK OK -
✅ Dynamic Sibling Children We need to have dynamically re-orderable or conditionally rendered default slot sibling elements OK OK -
Nested Relocated & Dynamic Sibling Children We need to have dynamically re-orderable children and also these children elements can be passed through several components via using default slot FAIL FAIL #5403
Conditional Rendering (named slot) We need to have conditionally rendered named slot element(s) FAIL OK #5365
Conditional Rendering (default slot) We need to have conditionally rendered default slot element(s) PARTIALLY1 PARTIALLY1 #5365
Slot fallback We need to have stable slot fallback FAIL1 FAIL1 -
Slot ref handling We need to be able to handle the ref attribute for slots FAIL FAIL #5337
Update "textContent" We need to be able to update the default slot text by using component's textContent attribute FAIL FAIL #5354
Update "innerText" We need to be able to update the default slot text by using component's innerText attribute FAIL FAIL -

1: slot contents are hidden but slot fallback content is not visible

Expected Behavior

all the cases should work

System Info

System: node 16.18.0
    Platform: darwin (23.1.0)
   CPU Model: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz (12 cpus)
    Compiler: /Users/yigit.yuce/Documents/Projects/personal/yigityuce.github/stencil-v4-scoped-issues/node_modules/@stencil/core/compiler/stencil.js
       Build: 1707148558
     Stencil: 4.12.1 🏸
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.27.0

Steps to Reproduce

explained in the current behavior section and also the main-app component in the repo is self-explanatory

Code Reproduction URL

https://github.com/yigityuce/stencil-v4-scoped-issues

Additional Information

No response

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions