Comments (5)
eduardolundgren
commented on May 16, 2024
The reason it doesn't work is because senna data attributes handler uses document.body as base element, see https://github.com/eduardolundgren/senna/blob/master/src/senna.js#L368.
You can register them via JavaScript:
var app = senna.dataAttributeHandler.getApp();
app.addSurfaces('style');This should work.
from senna.js.
FagnerMartinsBrack
commented on May 16, 2024
I tried to do as you suggested, setting an id attribute in the style tag in the head and adding as a surface through plain JS, but it didn't worked for some reason.
I started debugging the code and realized when I click the link it is appending a <div id="style-screen_*"> element inside the head. Is that the correct behavior or I am doing something wrong?
Screenshots below:
from senna.js.
eduardolundgren
commented on May 16, 2024
Well, that make sense, it appends the screen history to it. It's not possible then to do that currently.
In order to support it needs to support customizing the content element from div to something else, or even nothing.
The closest you can get for now is: Place the style inside a <div id="style"> inside <head> (which I am afraid is not valid HTML still):
<div id="style">
<div id="style-default">
<style>body{background: blue;}</style>
</div>
</div>We usually do that on the <body> anyways, but if it's not semantic we may need to think about a solution.
from senna.js.
FagnerMartinsBrack
commented on May 16, 2024
We usually do that on the <body> anyways, but if it's not semantic we may need to think about a solution.
Yes, I am currently using it in the body here.
I digged a little deeper though, and it seems that according to here if the scoped attribute is present, the style tag becomes a flow content:
The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.
In this case it may be reasonable to put the style content inside the body with the scoped attribute, applying the styles in the body scope.
If there's no drawbacks, it seems to be the only semantic solution without changing senna's behavior.
from senna.js.
eduardolundgren
commented on May 16, 2024
SGTM. Let me know how that goes and if the outcome is fine feel free to close the issue. Thank you for reporting.
from senna.js.
Related Issues (20)
- Senna does not correctly evaluate favicon when page changes
- Turn Cache on Screens off HOT 4
- endNavigate when instantiated via data attributes HOT 3
- Senna.js not working when navigating between pages when using a Web Server + SSL on IE11 HOT 2
- Browser support matrix doesn't mention support for any browser other than Edge in Windows 10 HOT 14
- Query appending to IE11 link
- Page keyword metatag is not being refreshed after page navigation HOT 2
- how to use asp.net mvc scene? HOT 1
- In IE11, media queries in style tags with data-senna-track attributes are applied as though the page has a width of 0px HOT 14
- Add custom behavior when a Redirect happens (302) HOT 4
- Senna moves focus away from autoFocus fields on refresh HOT 3
- Start navigation on mousedown instead of on click HOT 2
- Redirect Path passed to the historyState don't support hashes
- Back button reloads the inital page HOT 1
- How to flip a specific surface only? HOT 1
- Dynamically added classes to the head element gets removed on page change HOT 1
- Branch 3.x and move 2.x to master
- Cleanup long-standing PRs HOT 3
- Mio de mi HOT 1
- Saving app.screens into localStorage 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 senna.js.