Comments (1)
To achieve it, the scoped style sheets should be sent to native render engines before render. And the front-end frameworks no longer calculate the css rules referenced in class list.
Implementations
All the following packages should be adjusted:
weex-vue-loader
weex-js-runtime
weex-vue-framework
- Weex native render engines
weex-vue-loader
Generate scopeId
for each style sheet, and inject a code snippet to process them at the definition of each component.
if (typeof weex === 'object' && weex && weex.document) {
// process style sheets here
try {
weex.document.registerStyleSheets(scopeId, styleSheets)
} catch (e) {}
}
Weex JS Runtime
- Support sending style sheets to native before render.
In practice, the weex.document
should implement this API:
weex.document.registerStyleSheets(scopeId: string, styleSheets: Array<StyleSheet>)
It will send a render directive like this:
callNative(instanceId, [{
module: 'dom',
method: 'registerStyleSheets',
args: [scopeId, styleSheets]
}])
- Support sending
classList
to native instead ofclassStyles
.
Add a classList
attribute on the Weex Element, and no longer calculate the class styles in it.
Weex Vue Framework
- Add
@styleScope
attribute on each element which value equals thescopeId
.
The scopeId
will be generated by weex-vue-loader
and passed to Vue component through options
.
<div class="btn btn-large"></div>
{
type: 'div',
classList: ['btn', 'btn-large'],
attr: {
'@styleScope': ['data-v-b3b891b6']
}
}
- Set
class
attribute directly.
In particular, Do not get styles from classList
and call el.setStyles(styles)
any more, use el.setAttr('class', classList)
instead.
Native Render Engines
- Store and manage scoped style sheets.
- Correctly calculate styles from sheets according to the
@styleScope
andclassList
.
Style Priority
It's not the specificity of CSS selectors.
Even Weex doesn't support complex selectors, the priority of styles should also be considered.
Inline Style > Classes
If an element contains both style
and classList
, the CSS rules in style
will override those calculated from classList
.
Precedence (Order) of CSS Attributes
See this example:
<template>
<div class="foo vee bar"></div>
</template>
<style scoped>
.foo {
font-size: 50px;
}
.bar {
font-size: 100px;
color: green;
}
.vee {
color: blue;
}
</style>
The calculated style of <div>
should be:
div {
font-size: 100px;
color: blue;
}
- The rule behind will overwrite the previous rule.
The font-size
in .bar
override the font-size
in .foo
.
- order in
styleSheet
> order inclassList
.
The color
in .vee
override the color
in .bar
, even the bar
in written after the vee
in the class name.
- Rules in the behind style sheet will overwrite rules in previous style sheets.
from weex-native-directive.
Related Issues (13)
- 所有例子WeexPlayground都不能运行 HOT 1
- Parse object literal in binding attributes or styles HOT 1
- Use more readable attributes on `<recycle-list>` HOT 1
- Support to use filters
- Simplified syntax? HOT 2
- can use section? can use section header and support sticky?
- To support scrollToElement HOT 5
- Ios 上数据源为 null 崩溃
- recycle-list里面的自定义子组件点击事件传参问题 HOT 1
- 提示:Unknown custom element: <recycle-list>,怎么解决呢? HOT 1
- TypeError: undefined is not an object (evaluating '_vm.cell.count') HOT 1
- 我这边直接0.16版测试过,发现例子展示出来的数据不对。 HOT 1
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 weex-native-directive.