search

intercellular / cell

A self-driving web app framework
https://www.celljs.org
MIT License
1.51k stars 94 forks source link

Using web components with Cell #181

Open lachdoug opened 5 years ago

lachdoug commented 5 years ago

Should custom web components work with Cell?

I'm finding that web components don't work when their property names conflict with tag attribute names.

For example (using Chromium - Firefox web component support is lagging) , this Elix text area works:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <script src='https://www.celljs.org/cell.js'></script>
  <script type='module' src='https://component.kitchen/modules/AutosizeTextarea.js'></script>
</head>
<script>
var myElixTextArea = {
  $cell: true,
  $type: 'elix-autosize-textarea',
  'minimum-rows': 2,
}
</script>
</html>

But when a placeholder property is is added:

var myElixTextArea = {
  $cell: true,
  $type: 'elix-autosize-textarea',
  'minimum-rows': 2,
  placeholder: 'Type here'
}

Error is thrown: Uncaught RangeError: Maximum call stack size exceeded.