Custom element slots

[rorticus]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code has been formatted with prettier as per the readme code style guidelines
• Unit or Functional tests are included in the PR

Description:

Adding custom element support for (some) child functions.

The following scenarios are supported now,

Render Func

Dojo

<Foo>
    { () => <Bar /> }
</Foo>

Custom Elements

<element-foo>
    <element-bar></element-bar>
</element-foo>

Named Renders

Dojo

<Foo>
    {{ 
      bar: <Bar />, 
      qux: [<Qux />, <Qux />]
    }}
</Foo>

Custom Elements

<element-foo>
    <element-bar slot="bar"></element-bar>
    <element-qux slot="qux"></element-qux>
    <element-qux slot="qux"></element-qux>
</element-foo>

Named Render Funcs

Dojo

<Foo>
    {{ 
      bar: () => <Bar />, 
      qux: () => <Qux /> 
    }}
</Foo>

Custom Elements

<element-foo>
    <element-bar slot="bar"></element-bar>
    <element-qux slot="qux"></element-qux>
</element-foo>

Render Funcs with parameters

Dojo

<Foo>
{{
    bar: (active) => <Bar active={active} />
}}
</Foo>

Custom Elements

<element-foo>
    <element-bar id="bar" slot="bar"></element-bar>
</element-foo>

<script>
bar.addEventListener('render', function ({ detail: [active]}) {
    this.active = active;
});
</script>

Resolves #708

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4c72f58:

Sandbox	Source
frosty-bird-8co7w	Configuration

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a9acca5:

Sandbox	Source
mystifying-benz-inq7w	Configuration

[codecov]

Codecov Report

Merging #714 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #714   +/-   ##
=======================================
  Coverage   97.75%   97.76%           
=======================================
  Files         120      120           
  Lines        6949     6974   +25     
  Branches     1577     1585    +8     
=======================================
+ Hits         6793     6818   +25     
  Misses        156      156           

Impacted Files	Coverage Δ
src/core/registerCustomElement.ts	97.59% <100.00%> (+0.32%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 32bab69...a9acca5. Read the comment docs.

[matt-gadd]

This is going to be huge 👍