Comments (3)
To clarify, if you set your property as something different than an object structure with get
or set
method, the library tries to translate those values. Usually, property factory is used:
import { property } from 'hybrids';
const myElement = {
chain: 'value',
// this equals to
chain: property('value'),
};
chain
property from the example above works how property
factory is designed. You can find more about attributes in this section. It says that attributes are only used once when an element connects to the DOM. This design pattern follows <input />
behavior, and it allows not to observe attribute changes. You should treat attributes in HTML as static values, and use properties for dynamic changes. In your example you can do just like that:
let myElement = document.getElementsByTagName('kutasiki')[0]
myElement.chain = 22; // <-- Use property, not attribute
// This is no longer needed, as render property can detect the change and re-render when needed
// myElement.render()
Couple thoughts about your component example. I can see there, that you are using external CSS. If you want to create web component, which can be used with polyfills, you should avoid using <link>
(https://github.com/webcomponents/shadycss/issues/97). If you want to use the hybrids to create a wrapper for React component, I recommend using render
factory without shadow DOM. I think you don't need distribution (using <slot>
elements) and your CSS can be on the document level (I assume you are using some tool for styling, like CSS modules or styled components). If you want to do this, just use render
factory directly and pass the second argument to disable Shadow DOM:
import { render } from 'hybrids';
const MyElement = {
...,
render: render(
({ chain, ... }) => reactify(<div>...</div>),
{ shadowRoot: false },
),
};
One more thing 🤣 - you can't create a custom element without dash character in the tag name, even if is so funny as "kutasiki".
from hybrids.
Thanks buddy - its working as expected now.
from hybrids.
I hope I could help. If there something more to discuss feel free to re-open issue.
from hybrids.
Related Issues (20)
- Storage-first/storage-only option for [store.connect] HOT 10
- React integration - Error while unmounting the component HOT 2
- Try render a table but encounter a problem HOT 3
- about destructured host parameter in render function HOT 2
- I'm trying to load a model on button click. Component does not update after loading model HOT 5
- A storage without an identifier loads data even before assigning an identifier HOT 2
- Starter / template repository ? HOT 2
- How do I tap into `connected` / `disconnected` lifecycle methods ? HOT 2
- Confusing documentation on "class" attribute HOT 3
- An error occurs when saving a Draft HOT 9
- store.error() Guard does not work with enumerable Models loaded from asynchronous storage HOT 2
- A draft model instance with an empty ID returns an error when editing HOT 6
- When saving a model, linked models cannot be updated HOT 2
- Suggestion: Develop a solution that allows you to use a single component to create, edit and present a model HOT 5
- Cannot define default nested model HOT 3
- how to create a component method HOT 4
- how to implement focus management? HOT 4
- Bug: Template is not updated when component properties change HOT 14
- How to add focus when opening a form? HOT 4
- I can't write a polymorphic model definition for GeoJson objects HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hybrids.